/* ============================================================
   INVENTARE — ateliê de arquitetura
   Design system · luxo minimalista etéreo
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

:root{
  --paper:      #faf7f1;
  --paper-2:    #f2ede4;
  --paper-pure: #fdfcf9;
  --ink:        #3a362d;
  --ink-soft:   #5b5244;
  --ink-mute:   #938b7c;
  --sage:       #9bb8b0;
  --sage-deep:  #6c8b83;
  --mist:       #d1e2e0;
  --mist-2:     #e7efeb;
  --line:       rgba(58,54,45,.14);
  --line-soft:  rgba(58,54,45,.08);
  --shadow:     0 30px 80px -40px rgba(58,54,45,.45);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", system-ui, sans-serif;

  --ease: cubic-bezier(.16,1,.3,1);
  --gut: clamp(20px, 5vw, 90px);
  --maxw: 1500px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:auto; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  cursor:none;
}

::selection{ background:var(--sage); color:var(--paper-pure); }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:none; }

/* ---------- tipografia ---------- */
.display{
  font-family:var(--serif);
  font-weight:300;
  line-height:.95;
  letter-spacing:-.01em;
}
.eyebrow{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(11px,.78vw,13px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.serif-it{ font-family:var(--serif); font-style:italic; font-weight:300; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
section{ position:relative; }

/* ============================================================
   CURSOR CUSTOMIZADO
   ============================================================ */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; z-index:9999;
  pointer-events:none; border-radius:50%;
  mix-blend-mode:difference;
  will-change:transform;
}
.cursor-dot{ width:6px; height:6px; background:#fff; margin:-3px 0 0 -3px; }
.cursor-ring{
  width:40px; height:40px; margin:-20px 0 0 -20px;
  border:1px solid rgba(255,255,255,.7);
  transition:width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), opacity .3s, background .3s;
}
.cursor-ring.is-hover{ width:74px; height:74px; margin:-37px 0 0 -37px; background:rgba(255,255,255,.08); }
.cursor-label{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  font-family:var(--sans); font-weight:400; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:#fff; mix-blend-mode:difference;
  transform:translate(-50%,-50%); opacity:0; transition:opacity .3s;
}
@media (hover:none){ body{cursor:auto;} .cursor-dot,.cursor-ring,.cursor-label{display:none;} button,a{cursor:pointer;} }

/* ============================================================
   TELA DE LOADING
   ============================================================ */
.intro{
  position:fixed; inset:0; z-index:600; display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 50% 38%, var(--mist-2) 0%, transparent 62%),
    var(--paper);
  transition:opacity 1.1s var(--ease), visibility 1.1s;
}
.intro.done{ opacity:0; visibility:hidden; }
.intro__inner{ display:flex; flex-direction:column; align-items:center; gap:clamp(26px,4vh,46px); width:min(420px,72vw); }
.intro__logo{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(40px,7vw,74px); color:var(--sage-deep); letter-spacing:.02em;
  opacity:0; transform:scale(.93) translateY(14px); filter:blur(6px);
  transition:opacity 1.3s var(--ease), transform 1.7s var(--ease), filter 1.3s var(--ease);
}
.intro__bar{
  width:100%; height:2px; background:rgba(58,54,45,.12); overflow:hidden;
  opacity:0; transition:opacity 1s var(--ease) .35s;
}
.intro__fill{
  width:100%; height:100%; background:var(--sage-deep); transform:scaleX(0); transform-origin:left;
}
.intro__foot{
  width:100%; display:flex; align-items:baseline; justify-content:space-between;
  opacity:0; transition:opacity 1s var(--ease) .5s;
}
.intro__cap{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-mute); }
.intro__num{ font-family:var(--serif); font-size:clamp(28px,4vw,42px); line-height:1; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.intro.reveal-logo .intro__logo{ opacity:1; transform:none; filter:blur(0); }
.intro.reveal-logo .intro__bar,
.intro.reveal-logo .intro__foot{ opacity:1; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(18px,2.4vw,34px) var(--gut);
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s;
}
.nav.solid{
  background:rgba(250,247,241,.82);
  backdrop-filter:blur(14px);
  padding-block:clamp(12px,1.5vw,18px);
  box-shadow:0 1px 0 var(--line-soft);
}
.nav__brand{ display:flex; align-items:center; gap:14px; font-family:var(--serif); font-style:italic; font-size:clamp(24px,2.4vw,34px); color:var(--ink); }
.nav__links{ display:flex; gap:clamp(22px,2.6vw,48px); align-items:center; }
.nav__link{
  position:relative; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:400; color:var(--ink-soft); padding:6px 0;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease);
}
.nav__link:hover::after,.nav__link.active::after{ transform:scaleX(1); transform-origin:left; }
.nav__link.active{ color:var(--ink); }
.nav__cta{
  border:1px solid var(--ink); border-radius:40px; padding:10px 22px;
  background:transparent; color:var(--ink); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  transition:background .45s var(--ease), color .45s var(--ease);
}
.nav__cta:hover{ background:var(--ink); color:var(--paper); }
.nav__burger{ display:none; }

@media (max-width:820px){
  .nav__links{
    position:fixed; inset:0; background:var(--paper); flex-direction:column;
    justify-content:center; align-items:flex-start; gap:8px; padding:var(--gut);
    transform:translateX(100%); transition:transform .6s var(--ease); z-index:201;
  }
  .nav.open .nav__links{ transform:translateX(0); }
  .nav__link{ font-size:clamp(28px,9vw,46px); font-family:var(--serif); text-transform:none; letter-spacing:0; }
  .nav__link::after{display:none;}
  .nav__cta{ margin-top:18px; }
  .nav__burger{
    display:flex; flex-direction:column; gap:6px; z-index:202; background:none; border:none; padding:6px;
  }
  .nav__burger span{ width:30px; height:1.5px; background:var(--ink); transition:transform .4s var(--ease), opacity .3s; }
  .nav.open .nav__burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .nav.open .nav__burger span:nth-child(2){ opacity:0; }
  .nav.open .nav__burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; }
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 70% 10%, var(--mist-2) 0%, transparent 55%),
    radial-gradient(90% 70% at 15% 90%, rgba(155,184,176,.28) 0%, transparent 60%),
    var(--paper);
}
.hero__inner{ position:relative; z-index:2; padding-bottom:clamp(48px,7vh,110px); }
.hero h1{
  font-size:clamp(48px,10vw,168px);
  line-height:.84;
}
.hero h1 .reveal{ display:block; }
.hero h1 .l2{ padding-left:clamp(40px,9vw,170px); font-style:italic; color:var(--sage-deep); }
.hero__meta{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px;
  margin-top:clamp(26px,4vh,54px); padding-top:26px; border-top:1px solid var(--line);
}
.hero__meta p{ max-width:38ch; font-size:clamp(14px,1.05vw,17px); color:var(--ink-soft); }
.hero__actions{ display:flex; gap:16px; flex-wrap:wrap; }
.btn-line{
  display:inline-flex; align-items:center; gap:10px; border:1px solid var(--ink); border-radius:40px;
  padding:13px 26px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  transition:background .45s var(--ease), color .45s var(--ease);
}
.btn-line:hover{ background:var(--ink); color:var(--paper); }
.btn-line--solid{ background:var(--ink); color:var(--paper); }
.btn-line--solid:hover{ background:var(--sage-deep); border-color:var(--sage-deep); }
.hero__scroll{ display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-mute); }
.hero__scroll .line{ width:50px; height:1px; background:var(--ink-mute); position:relative; overflow:hidden; }
.hero__scroll .line::after{ content:""; position:absolute; inset:0; background:var(--ink); transform:translateX(-100%); animation:scrollline 2.4s var(--ease) infinite; }
@keyframes scrollline{ 0%{transform:translateX(-100%);} 50%{transform:translateX(0);} 100%{transform:translateX(100%);} }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal-word{ display:inline-block; vertical-align:top; margin-right:.26em; }
.reveal-word:last-child{ margin-right:0; }
.hero h1 .l2 .reveal-word{ margin-right:.42em; }
.reveal-word > span{ display:inline-block; transform:translateY(.55em); opacity:0; transition:transform 1.05s var(--ease), opacity 1.05s var(--ease); transition-delay:calc(var(--i,0) * 65ms); }
.reveal.in .reveal-word > span{ transform:translateY(0); opacity:1; }

.fade-up{ opacity:0; transform:translateY(40px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.fade-up.in{ opacity:1; transform:none; }
.fade-up.d1{ transition-delay:.12s; } .fade-up.d2{ transition-delay:.24s; } .fade-up.d3{ transition-delay:.36s; }

/* ============================================================
   MÉTODO INVENTARE® (4 pilares + assinatura)
   ============================================================ */
.metodo{ padding-block:clamp(90px,16vh,200px); }
.metodo__head{ max-width:720px; }
.metodo h2{ font-size:clamp(40px,6vw,96px); margin:18px 0 18px; }
.metodo h2 sup{ font-size:.3em; vertical-align:super; }
.metodo__lead{ font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.2vw,32px); color:var(--sage-deep); margin-bottom:20px; }
.metodo__sub{ font-size:clamp(15px,1.15vw,19px); color:var(--ink-soft); max-width:52ch; }
.pilares{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,48px); margin-top:clamp(50px,8vh,90px); }
.pilar{ border-top:1px solid var(--line); padding-top:24px; }
.pilar .n{ font-family:var(--serif); font-size:14px; color:var(--sage-deep); letter-spacing:.1em; }
.pilar h3{ font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.4vw,34px); margin:14px 0 8px; }
.pilar p{ font-size:14px; color:var(--ink-mute); }
@media (max-width:900px){ .pilares{ grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:520px){ .pilares{ grid-template-columns:1fr; } }

.assinatura{ margin-top:clamp(70px,12vh,140px); }
.assinatura__title{ font-family:var(--serif); font-style:italic; font-size:clamp(28px,3.4vw,48px); margin-bottom:clamp(30px,5vh,54px); }
.assinatura__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,40px); }
.assin-card{ background:var(--paper-pure); border:1px solid var(--line-soft); border-radius:6px; padding:clamp(24px,2.6vw,38px); transition:box-shadow .4s var(--ease), transform .4s var(--ease); }
.assin-card:hover{ box-shadow:var(--shadow); transform:translateY(-4px); }
.assin-card .ic{ width:34px; height:34px; stroke:var(--sage-deep); fill:none; stroke-width:1.3; margin-bottom:16px; }
.assin-card h4{ font-family:var(--serif); font-weight:500; font-size:clamp(20px,1.8vw,26px); margin-bottom:8px; }
.assin-card p{ font-size:14px; color:var(--ink-mute); }
@media (max-width:820px){ .assinatura__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .assinatura__grid{ grid-template-columns:1fr; } }

/* ============================================================
   ARQUITETA
   ============================================================ */
.arq{ padding-block:clamp(70px,12vh,150px); }
.arq__grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(40px,7vw,120px); align-items:center; }
.arq__media{ position:relative; }
.arq__portrait{ position:relative; overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow); }
.arq__plate{
  position:absolute; right:-clamp(12px,2vw,28px); bottom:38px; background:var(--paper);
  padding:18px 26px; box-shadow:var(--shadow); max-width:78%;
}
.arq__plate .nm{ font-family:var(--serif); font-size:clamp(26px,2.6vw,38px); line-height:1; color:var(--ink); }
.arq__plate .rl{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); margin-top:8px; }
.arq__text .eyebrow{ display:block; }
.arq h2{ font-size:clamp(34px,4.4vw,72px); margin:22px 0 30px; }
.arq p{ font-size:clamp(15px,1.15vw,19px); color:var(--ink-soft); max-width:50ch; margin-bottom:20px; }
.arq .sign{ font-family:var(--serif); font-style:italic; font-size:clamp(24px,2.6vw,36px); color:var(--ink); margin-top:18px; }

@media (max-width:820px){
  .arq__grid{ grid-template-columns:1fr; gap:54px; }
  .arq__portrait{ max-width:440px; }
}

/* ============================================================
   PROJETOS
   ============================================================ */
.proj{ padding-block:clamp(50px,8vh,90px) clamp(90px,16vh,180px); }
.proj__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:clamp(30px,5vh,60px); }
.proj__head h2{ font-size:clamp(40px,7vw,120px); }
.proj__head .count{ font-family:var(--serif); font-size:clamp(16px,1.3vw,20px); color:var(--ink-mute); }
.proj__lead{ font-size:clamp(15px,1.1vw,18px); color:var(--ink-soft); max-width:60ch; margin-bottom:clamp(30px,6vh,70px); }

.proj__seg{ font-family:var(--sans); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--sage-deep); margin:clamp(30px,5vh,54px) 0 6px; }

.proj__list{ display:flex; flex-direction:column; }
.pitem{
  position:relative; display:grid; grid-template-columns:90px 1fr auto;
  gap:clamp(20px,4vw,60px); align-items:center;
  padding:clamp(26px,4vh,46px) 0; border-top:1px solid var(--line);
  transition:padding-left .6s var(--ease);
}
.proj__list .pitem:last-child{ border-bottom:1px solid var(--line); }
.pitem__num{ font-family:var(--serif); font-size:clamp(15px,1.1vw,18px); color:var(--ink-mute); }
.pitem__title{ font-family:var(--serif); font-size:clamp(30px,4.4vw,72px); line-height:1; font-weight:300; transition:transform .6s var(--ease), color .5s; }
.pitem__title .loc{ display:block; font-family:var(--sans); font-size:clamp(12px,.85vw,14px); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-top:14px; }
.pitem__meta{ text-align:right; font-size:13px; letter-spacing:.1em; color:var(--ink-mute); white-space:nowrap; }
.pitem:hover{ padding-left:clamp(10px,2vw,34px); }
.pitem:hover .pitem__title{ color:var(--sage-deep); }
.pitem__peek.imgwrap{
  position:fixed; top:0; left:0; width:clamp(220px,22vw,340px); aspect-ratio:4/5; z-index:150;
  pointer-events:none; opacity:0; overflow:hidden;
  transform:translate(-50%,-50%) scale(.85); transition:opacity .45s var(--ease), transform .45s var(--ease);
  box-shadow:var(--shadow);
}
.pitem__peek img{ width:100%; height:100%; object-fit:cover; }
.pitem__peek.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }

@media (max-width:680px){
  .pitem{ grid-template-columns:50px 1fr; }
  .pitem__meta{ display:none; }
  .pitem__peek{ display:none; }
}

/* ============================================================
   FAIXA CINEMÁTICA
   ============================================================ */
.cine{ height:70svh; overflow:hidden; position:relative; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--sage-deep), var(--ink)); }
.cine::after{ content:""; position:absolute; inset:0; background:rgba(40,38,32,.28); z-index:1; }
.cine__txt{ position:relative; z-index:2; text-align:center; color:var(--paper-pure); padding:var(--gut); max-width:1100px; }
.cine__txt h3{ font-family:var(--serif); font-weight:300; font-size:clamp(30px,5vw,84px); line-height:1.02; }
.cine__txt .eyebrow{ color:rgba(255,255,255,.7); margin-bottom:24px; }

/* ============================================================
   CONTATO + RODAPÉ
   ============================================================ */
.contato{ background:var(--ink); color:var(--paper); padding-block:clamp(90px,16vh,180px); }
.contato .eyebrow{ color:rgba(247,243,235,.5); }
.contato__grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(40px,7vw,120px); align-items:end; }
.contato h2{ font-family:var(--serif); font-weight:300; font-size:clamp(36px,5.4vw,96px); line-height:.96; margin:18px 0 0; }
.contato__lead{ margin-top:26px; font-size:clamp(15px,1.1vw,18px); color:rgba(247,243,235,.75); max-width:44ch; }
.contato__actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
.btn-paper{ display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(247,243,235,.4); border-radius:40px; padding:14px 28px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper); transition:.4s var(--ease); }
.btn-paper:hover{ background:var(--sage); border-color:var(--sage); color:var(--ink); }
.btn-paper--solid{ background:var(--sage); border-color:var(--sage); color:var(--ink); }
.btn-paper--solid:hover{ background:var(--paper); border-color:var(--paper); }
.contato__side{ display:flex; flex-direction:column; gap:30px; }
.contato__side .blk .k{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:rgba(247,243,235,.45); margin-bottom:8px; }
.contato__side .blk .v{ font-size:clamp(15px,1.1vw,18px); color:var(--paper); }
.contato__side .socials{ display:flex; gap:20px; }
.contato__side .socials a{ font-size:13px; letter-spacing:.1em; color:rgba(247,243,235,.7); transition:color .4s; }
.contato__side .socials a:hover{ color:var(--sage); }

.footer{ background:var(--ink); color:var(--paper); padding:40px var(--gut); border-top:1px solid rgba(247,243,235,.12); }
.footer__row{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.footer .brand{ font-family:var(--serif); font-style:italic; font-size:28px; color:var(--paper); }
.footer small{ font-size:11px; letter-spacing:.12em; color:rgba(247,243,235,.5); }
.footer a.adm{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(247,243,235,.55); border:1px solid rgba(247,243,235,.2); padding:8px 16px; border-radius:30px; transition:.4s; }
.footer a.adm:hover{ background:var(--sage); color:var(--ink); border-color:var(--sage); }

@media (max-width:820px){ .contato__grid{ grid-template-columns:1fr; gap:48px; } }

/* ============================================================
   OVERLAY DE PROJETO
   ============================================================ */
.po{
  position:fixed; inset:0; z-index:500; background:var(--paper);
  overflow-y:auto; overflow-x:hidden; opacity:0; visibility:hidden;
  transition:opacity .6s var(--ease), visibility .6s;
}
.po.open{ opacity:1; visibility:visible; }
.po__close{
  position:fixed; top:24px; right:var(--gut); z-index:520;
  width:54px; height:54px; border-radius:50%; border:1px solid var(--line);
  background:rgba(250,247,241,.7); backdrop-filter:blur(8px); display:grid; place-items:center;
  transition:.4s;
}
.po__close:hover{ background:var(--ink); border-color:var(--ink); }
.po__close svg{ width:18px; height:18px; stroke:var(--ink); transition:stroke .4s; }
.po__close:hover svg{ stroke:var(--paper); transform:rotate(90deg); transition:.5s var(--ease); }
.po__hero{ height:70svh; position:relative; overflow:hidden; }
.po__hero img{ width:100%; height:110%; object-fit:cover; will-change:transform; }
.po__hero .cap{ position:absolute; left:var(--gut); bottom:clamp(34px,6vh,70px); z-index:3; color:var(--paper-pure); }
.po__hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent 40%, rgba(40,38,32,.55)); }
.po__hero .cap .eyebrow{ color:rgba(255,255,255,.75); }
.po__hero .cap h2{ font-family:var(--serif); font-weight:300; font-size:clamp(40px,8vw,140px); line-height:.9; margin-top:10px; }
.po__body{ padding-block:clamp(50px,9vh,120px); }
.po__info{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(40px,7vw,120px); margin-bottom:clamp(50px,9vh,110px); }
.po__info .facts{ display:grid; grid-template-columns:1fr 1fr; gap:30px 40px; align-self:start; }
.po__info .facts .k{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:8px; }
.po__info .facts .v{ font-family:var(--serif); font-size:clamp(22px,2.2vw,34px); color:var(--ink); }
.po__info .desc p{ font-size:clamp(16px,1.2vw,20px); color:var(--ink-soft); margin-bottom:20px; max-width:54ch; }
.po__cs{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); margin-bottom:clamp(40px,7vh,90px); }
.po__cs .k{ font-family:var(--serif); font-style:italic; font-size:clamp(22px,2vw,30px); color:var(--sage-deep); margin-bottom:16px; }
.po__cs ul{ list-style:none; }
.po__cs li{ font-size:clamp(15px,1.1vw,18px); color:var(--ink-soft); padding:10px 0; border-bottom:1px solid var(--line-soft); }
.po__gallery{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,28px); }
.po__gallery figure{ overflow:hidden; }
.po__gallery figure.tall{ grid-row:span 2; }
.po__gallery figure.wide{ grid-column:span 2; }
.po__gallery img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; transition:transform 1.4s var(--ease); }
.po__gallery figure.wide img{ aspect-ratio:16/9; }
.po__gallery figure:hover img{ transform:scale(1.05); }
.po__gallery:empty{ display:none; }
.po__nav{ display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:clamp(50px,9vh,110px); padding-top:40px; border-top:1px solid var(--line); }
.po__nav button{ background:none; border:none; color:var(--ink); text-align:left; }
.po__nav .lab{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-mute); }
.po__nav .ttl{ font-family:var(--serif); font-size:clamp(22px,2.6vw,40px); margin-top:6px; transition:color .4s; }
.po__nav button:hover .ttl{ color:var(--sage-deep); }
.po__nav .next{ text-align:right; }

@media (max-width:820px){ .po__info{ grid-template-columns:1fr; gap:40px; } .po__cs{ grid-template-columns:1fr; } .po__gallery{ grid-template-columns:1fr; } .po__gallery figure.tall{ grid-row:auto; } }

/* ============================================================
   IMAGEM — placeholder / fallback
   ============================================================ */
.imgwrap{ position:relative; background:linear-gradient(135deg, var(--mist-2), var(--mist)); overflow:hidden; }
.imgwrap.broken::after,
.imgwrap.ph::after{
  content:"INVENTARE"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--serif); font-style:italic; letter-spacing:.1em; font-size:clamp(18px,2vw,30px);
  color:var(--sage-deep); background:linear-gradient(135deg,var(--mist-2),var(--mist));
}
.imgwrap.ph[data-label]::after{ content:attr(data-label); font-size:clamp(12px,1.2vw,15px); letter-spacing:.24em; text-transform:uppercase; font-style:normal; font-family:var(--sans); color:var(--ink-mute); }

.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(250,247,241,.35) 0%,
    rgba(250,247,241,.45) 20%,
    rgba(250,247,241,.75) 46%,
    rgba(250,247,241,80)   64%);
}
@media (prefers-reduced-motion: reduce){ .hero__video{ display:none; } }