/* ==========================================================================
   Demonstração MG Web · barbearia (marca fictícia "Bravo")
   Esqueleto editorial: header que troca de tom, hero preso com a primeira
   seção subindo por cima, serviços em sanfona com tabela de preços,
   visagismo desenhado em traço, fachadas que trocam nas unidades.
   Paleta: marinho das paredes, osso e cobre. Contrastes (WCAG 2.1):
     osso sobre marinho ....... 14.22   névoa sobre marinho ... 6.84
     cobre sobre marinho ....... 6.43   cinza sobre osso ...... 5.30
     cobre-escuro sobre osso ... 5.78   marinho sobre cobre ... 6.43
   ========================================================================== */

:root{
  --ink:#0D1E27;
  --ink-2:#132833;
  --bone:#EFEAE0;
  --bone-2:#E1DACB;
  --gold:#E08A4F;
  --gold-deep:#8C4719;
  --smoke:#9AA6AC;
  --ash:#55616A;
  --line-d:rgba(239,234,224,.14);
  --line-l:rgba(13,30,39,.16);

  --f-disp:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --pad:clamp(20px,5.2vw,72px);
  --hdr:64px;
  --sec:clamp(88px,15vw,184px);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
@media (min-width:900px){ :root{ --hdr:80px } }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;overflow-x:clip;
  background:var(--ink);color:var(--bone);
  font:400 1rem/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
html.is-locked,html.is-locked body{overflow:hidden}
[hidden]{display:none!important}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,figure,ol,ul,dl,dd,blockquote{margin:0}
ol,ul{list-style:none;padding:0}
em{font-style:italic}
small{font-size:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
[data-tone="light"] :focus-visible,[data-tone="gold"] :focus-visible{outline-color:var(--ink)}
[tabindex="-1"]:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--gold);color:var(--ink);padding:12px 18px;font-weight:600}
.skip:focus{top:12px}


/* ---------- tipografia ----------
   Fraunces no corte de título: serifa de contraste alto ao lado do letreiro
   desenhado à mão do logo. O itálico é o acento, sempre no amarelo. */
.d-xl,.d-xxl,.ass__t{
  font-family:var(--f-disp);font-weight:800;font-optical-sizing:auto;
  line-height:.9;letter-spacing:-.035em;
}
.d-xl{font-size:clamp(3rem,14vw,8.4rem)}
.d-xxl{font-size:clamp(3.1rem,13.6vw,11rem)}
@media (min-width:900px){ .d-xxl{font-size:clamp(4.4rem,8vw,9.4rem)} }
.d-xl em,.d-xxl em,.ass__t em{font-weight:600;letter-spacing:-.03em}
.ac{color:var(--gold)}
[data-tone="light"] .ac{color:var(--gold-deep)}
.lead{font-size:clamp(1.06rem,1rem + .35vw,1.3rem);line-height:1.55}

.rot{
  display:flex;gap:14px;align-items:baseline;
  font:600 .72rem/1 var(--f-body);letter-spacing:.22em;text-transform:uppercase;
  color:var(--smoke);margin-bottom:clamp(22px,4vw,40px);
}
.rot span{color:var(--gold)}
[data-tone="light"] .rot{color:var(--ash)}
[data-tone="light"] .rot span{color:var(--gold-deep)}

/* ---------- botões e links ---------- */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:0 26px;
  background:var(--gold);color:var(--ink);
  font:600 .98rem/1 var(--f-body);letter-spacing:.01em;white-space:nowrap;
  transition:color .45s var(--ease),transform .2s ease;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--bone);transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn__ar{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;transition:transform .45s var(--ease)}
.btn:active{transform:scale(.98)}
@media (hover:hover){
  .btn:hover::before{transform:translateY(0)}
  .btn:hover .btn__ar{transform:translateX(5px)}
}
.btn--sm{min-height:44px;padding:0 18px;font-size:.88rem}
.btn--lg{min-height:64px;padding:0 34px;font-size:1.05rem}
.btn--full{width:100%}
.btn--dark{background:var(--ink);color:var(--bone)}
.btn--dark::before{background:var(--gold)}
@media (hover:hover){ .btn--dark:hover{color:var(--ink)} }

.lnk{
  display:inline-block;padding:10px 0;
  font:600 .95rem/1.2 var(--f-body);
  background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/100% 1px no-repeat;
  transition:background-size .5s var(--ease),color .3s ease;
}
@media (hover:hover){
  .lnk:hover{background-size:0 1px;background-position:100% calc(100% - 8px);color:var(--gold)}
  [data-tone="light"] .lnk:hover{color:var(--gold-deep)}
}

/* ---------- traço (leitura do rosto) ----------
   pathLength="1" em cada caminho: o tracejado vai de 1 a 0 sem medir nada. */
.traco path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.traco .traco--guia{stroke:var(--gold);stroke-width:1;opacity:.85}
.js .traco path{stroke-dashoffset:1;transition:stroke-dashoffset 2.6s var(--ease-io)}
.js .traco .traco--guia{transition-duration:1.8s;transition-delay:1.1s}

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--hdr);
  display:flex;align-items:center;gap:clamp(12px,2vw,28px);
  padding:0 var(--pad);padding-top:env(safe-area-inset-top);
  color:var(--bone);
  transition:transform .6s var(--ease),background-color .4s ease,color .4s ease;
}
.hdr.is-solid{background:rgba(13,30,39,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hdr.is-solid[data-tone="light"]{background:rgba(239,234,224,.9);color:var(--ink)}
.hdr.is-solid[data-tone="gold"]{background:rgba(224,138,79,.96);color:var(--ink)}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr[data-tone="gold"] .hdr__cta,.hdr[data-tone="light"] .hdr__cta{background:var(--ink);color:var(--bone)}
.hdr[data-tone="gold"] .hdr__cta::before,.hdr[data-tone="light"] .hdr__cta::before{background:var(--gold)}
.hdr[data-tone="light"] .brand__word,.hdr[data-tone="gold"] .brand__word{color:var(--ink)}

.brand{display:flex;align-items:center;gap:12px;margin-right:auto;min-height:44px}
.brand__word{font:800 1.75rem/1 var(--f-disp);letter-spacing:-.035em;color:var(--gold);margin-top:-.08em;transition:color .4s ease}
.brand__sub{font:600 .6rem/1 var(--f-body);letter-spacing:.3em;text-transform:uppercase;opacity:.82;padding-top:.5em}
@media (max-width:379px){ .brand__sub{display:none} }

.nav{display:none}
@media (min-width:900px){
  .nav{display:flex;gap:clamp(20px,2.6vw,40px)}
  .nav a{position:relative;font:500 .92rem/1 var(--f-body);padding:14px 0}
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
  .nav a:hover::after{transform:scaleX(1);transform-origin:left}
}

.burger{position:relative;width:44px;height:44px;margin-right:-10px;flex:none}
.burger__l{position:absolute;left:10px;right:10px;height:2px;background:currentColor;transition:transform .5s var(--ease)}
.burger__l:nth-child(1){top:17px}
.burger__l:nth-child(2){top:25px}
.burger[aria-expanded="true"] .burger__l:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__l:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
@media (min-width:900px){ .burger{display:none} }

/* ---------- menu mobile ---------- */
.menu{
  position:fixed;inset:0;z-index:90;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--hdr) + 28px) var(--pad) calc(28px + env(safe-area-inset-bottom));
  background:var(--ink);overflow-y:auto;overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease-io);
}
.menu.is-open{clip-path:inset(0)}
.menu__nav{display:flex;flex-direction:column}
.menu__nav a{
  display:flex;align-items:baseline;gap:14px;padding:6px 0;
  font:800 clamp(2.4rem,11.4vw,4.2rem)/1.02 var(--f-disp);letter-spacing:-.035em;
  opacity:0;transform:translateY(34px);
  transition:opacity .5s ease,transform .8s var(--ease);
}
.menu.is-open .menu__nav a{opacity:1;transform:none}
.menu.is-open .menu__nav a:nth-child(1){transition-delay:.18s}
.menu.is-open .menu__nav a:nth-child(2){transition-delay:.24s}
.menu.is-open .menu__nav a:nth-child(3){transition-delay:.30s}
.menu.is-open .menu__nav a:nth-child(4){transition-delay:.36s}
.menu.is-open .menu__nav a:nth-child(5){transition-delay:.42s}
.menu__n{font:600 .72rem/1 var(--f-body);letter-spacing:.2em;color:var(--gold);transform:translateY(-.9em)}
.menu__foot{display:grid;gap:14px;margin-top:40px;color:var(--smoke);font-size:.92rem;opacity:0;transition:opacity .6s ease .35s}
.menu.is-open .menu__foot{opacity:1}
.menu__foot .lnk{justify-self:start;color:var(--bone)}

/* ==========================================================================
   HERO
   ========================================================================== */
.cover{position:relative}
.hero{
  position:relative;overflow:hidden;background:var(--ink);
  height:100vh;height:100svh;min-height:560px;
  display:flex;flex-direction:column;justify-content:flex-end;
}
/* O hero só fica preso quando a tela é alta o bastante para ele inteiro. */
@media (min-height:560px){ .hero{position:sticky;top:0} }

.hero__media{position:absolute;inset:0;transform:scale(var(--hs,1));transform-origin:50% 60%;will-change:transform}
.hero__media picture,.hero__img{position:absolute;inset:0;width:100%;height:100%}
.hero__img{object-fit:cover;object-position:50% 50%}
.hero__shade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(13,30,39,.72) 0%,rgba(13,30,39,.18) 16%,rgba(13,30,39,0) 30%,rgba(13,30,39,.3) 46%,rgba(13,30,39,.95) 78%,var(--ink) 100%),
    rgba(13,30,39,var(--hd,.08));
}
.hero__body{
  position:relative;
  padding:calc(var(--hdr) + 24px) var(--pad) calc(clamp(28px,6svh,64px) + env(safe-area-inset-bottom));
  transform:translateY(var(--hy,0));
}
.hero__eyebrow{
  display:flex;align-items:center;gap:12px;white-space:nowrap;
  font:600 .72rem/1 var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:var(--bone);
}
.hero__eyebrow::before{content:"";width:28px;height:2px;background:var(--gold);flex:none}
@media (max-width:399px){ .hero__eyebrow{font-size:.64rem;letter-spacing:.15em;gap:10px} .hero__eyebrow::before{width:18px} }
/* O nome é o título: caixa alta no peso máximo, o maior que cabe na tela.
   Cada letra tem a própria máscara para subir sozinha; o aperto entre elas
   vem da margem negativa, não do letter-spacing (que cortaria o glifo). */
.hero__mark{margin:clamp(12px,2svh,22px) 0 0 -.05em;line-height:.8}
.hero__word{display:block;white-space:nowrap;font:900 min(26vw,27svh)/.8 var(--f-disp);font-variation-settings:"opsz" 144;color:var(--bone)}
.hero__l{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .08em 0;margin:0 -.125em 0 -.08em}
.hero__l:first-child{margin-left:0;padding-left:0}
.hero__l > span{display:inline-block}
.hero__tag{display:block;margin:clamp(12px,1.8svh,20px) 0 0 .1em;font:600 .74rem/1 var(--f-body);letter-spacing:.62em;text-transform:uppercase;color:var(--gold)}
.hero__foot{display:grid;gap:14px;margin-top:clamp(14px,2.4svh,26px)}
.hero__lead{font:800 clamp(2rem,8.6vw,3.4rem)/.95 var(--f-disp);letter-spacing:-.035em}
.hero__lead em{font-weight:600;color:var(--gold)}
.hero__sub-tx{max-width:36ch;color:var(--bone);opacity:.88;font-size:clamp(.98rem,.94rem + .2vw,1.1rem);line-height:1.5}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:6px}
@media (max-width:599px){ .hero__cta .btn{flex:1 1 100%} }

@media (min-width:900px){
  .hero__shade{
    background:
      linear-gradient(90deg,rgba(13,30,39,.92) 0%,rgba(13,30,39,.7) 32%,rgba(13,30,39,.12) 62%,rgba(13,30,39,.2) 100%),
      linear-gradient(0deg,rgba(13,30,39,.75) 0%,rgba(13,30,39,0) 40%),
      linear-gradient(180deg,rgba(13,30,39,.55) 0%,rgba(13,30,39,0) 18%),
      rgba(13,30,39,var(--hd,.08));
  }
  .hero__img{object-position:62% 50%}
  .hero__body{max-width:min(760px,56vw);padding-bottom:clamp(48px,9svh,104px)}
  .hero__word{font-size:min(13.2vw,28svh)}
  .hero__foot{max-width:540px}
}

/* ==========================================================================
   A CASA - sobe por cima do hero
   ========================================================================== */
.sobre{
  position:relative;z-index:2;
  background:var(--bone);color:var(--ink);
  padding:var(--sec) var(--pad);
}
.sobre__fig{position:relative;margin-top:clamp(40px,8vw,64px);aspect-ratio:4 / 5;overflow:hidden;background:var(--bone-2)}
.sobre__fig img{width:100%;height:100%;object-fit:cover}
.sobre__txt{margin-top:clamp(32px,7vw,56px);max-width:40ch}
.sobre__txt .lnk{margin-top:22px}

@media (min-width:900px){
  .sobre{
    display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto 1fr;
    column-gap:clamp(16px,2vw,32px);align-items:start;padding-block:calc(var(--sec) * .7);
  }
  .sobre .rot{grid-column:1 / 8;grid-row:1}
  .sobre__t{grid-column:1 / 8;grid-row:2;font-size:min(8.4rem,9.6vw)}
  .sobre__fig{grid-column:8 / 13;grid-row:1 / 4;margin-top:0;align-self:center}
  .sobre__txt{grid-column:1 / 6;grid-row:3;margin-top:clamp(36px,3.6vw,64px)}
}
@media (min-width:1280px){ .sobre__fig{grid-column:9 / 13} }

/* ==========================================================================
   SERVIÇOS
   ========================================================================== */
.svc{position:relative;padding:var(--sec) var(--pad);background:var(--ink);overflow:hidden}
.svc__head{margin-bottom:clamp(36px,7vw,80px)}

/* Faixa: os serviços correndo numa fita amarela. O trilho tem o texto duas
   vezes e anda metade da própria largura: recomeça sem emenda. */
.faixa{
  position:relative;overflow:hidden;
  margin:calc(var(--sec) * -1) calc(var(--pad) * -1) var(--sec);
  padding:clamp(10px,1.2vw,16px) 0;
  background:var(--gold);color:var(--ink);
}
.faixa__trilho{
  display:flex;align-items:center;gap:clamp(20px,2.4vw,36px);width:max-content;
  font:600 italic clamp(1.5rem,1.2rem + 1.4vw,2.5rem)/1.2 var(--f-disp);letter-spacing:-.02em;white-space:nowrap;
  animation:faixa 30s linear infinite;
}
.faixa__trilho i{width:.34em;height:.34em;background:currentColor;transform:rotate(45deg);flex:none}
@keyframes faixa{to{transform:translateX(calc(-50% - clamp(10px,1.2vw,18px)))}}

.svc__note{margin-top:clamp(26px,3vw,36px);color:var(--smoke)}
.svc__list{position:relative;z-index:2;border-bottom:1px solid var(--line-d)}
.svc__it{border-top:1px solid var(--line-d)}
.svc__btn{
  width:100%;min-height:78px;padding:18px 0;
  display:grid;grid-template-columns:auto minmax(0,1fr) 28px;align-items:center;gap:16px;
  text-align:left;
}
.svc__n{font:600 .74rem/1 var(--f-body);letter-spacing:.16em;color:var(--gold);align-self:start;padding-top:.9em}
.svc__name{font:800 clamp(2.1rem,10vw,3.6rem)/1 var(--f-disp);letter-spacing:-.035em;transition:transform .7s var(--ease),color .4s ease}
.svc__plus{position:relative;width:28px;height:28px}
.svc__plus::before,.svc__plus::after{content:"";position:absolute;left:4px;right:4px;top:13px;height:2px;background:currentColor;transition:transform .5s var(--ease)}
.svc__plus::after{transform:rotate(90deg)}
.svc__btn[aria-expanded="true"] .svc__plus::after{transform:rotate(0)}

.svc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.svc__it.is-open .svc__panel{grid-template-rows:1fr}
.svc__inner{min-height:0;overflow:hidden;display:grid;gap:12px}
.svc__go{
  justify-self:start;margin-bottom:24px;
  display:inline-flex;align-items:center;min-height:44px;
  font:600 .95rem/1 var(--f-body);color:var(--gold);border-bottom:1px solid currentColor;
}

/* Tabela de preços: nome, duração, valor. Números tabulares para os valores
   alinharem na coluna. */
.preco{border-top:1px dashed var(--line-d)}
.preco li{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:baseline;column-gap:14px;
  padding:11px 0;border-bottom:1px dashed var(--line-d);
}
.preco__n{color:var(--bone);line-height:1.35}
.preco__n small{display:block;color:var(--smoke);font-size:.82rem}
.preco__t{color:var(--smoke);font-size:.85rem;white-space:nowrap}
.preco__v{font:600 1rem/1 var(--f-body);color:var(--gold);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right;min-width:4.6em}

@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .svc__it{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,40%);align-items:center;column-gap:40px}
  .svc__btn{cursor:default;min-height:0;padding:clamp(26px,2.6vw,38px) 0;grid-template-columns:clamp(56px,6vw,96px) minmax(0,1fr)}
  .svc__plus{display:none}
  .svc__name{font-size:clamp(3rem,5.4vw,5.8rem)}
  .svc__panel{grid-template-rows:1fr}
  .svc__inner{overflow:visible;gap:10px;padding:clamp(20px,2vw,30px) 0}
  .svc__go{margin:0}
  .svc__it:hover .svc__name{transform:translateX(18px);color:var(--gold);font-style:italic;font-weight:600}
  .svc__list:hover .svc__it:not(:hover) .svc__name{color:rgba(239,234,224,.3)}
}

/* ==========================================================================
   VISAGISMO
   ========================================================================== */
.met{background:var(--bone);color:var(--ink);padding:var(--sec) var(--pad)}
.met__fig{margin:clamp(40px,8vw,64px) auto 0;max-width:420px;color:var(--ink)}
.met__rosto{display:block;width:100%;height:auto;overflow:visible}
.met__fig.is-in .traco path{stroke-dashoffset:0}
.met__cotas path{fill:none;stroke:var(--gold-deep);stroke-width:1}
.met__cotas text{font:600 11px var(--f-body);letter-spacing:.08em;fill:var(--ash)}
.js .met__cotas{opacity:0;transition:opacity 1s ease 2.2s}
.met__fig.is-in .met__cotas{opacity:1}
/* O desenho usa o mesmo [data-rv] da página, mas não sobe nem esmaece:
   quem entra é o traço. */
.js .met__fig[data-rv]{opacity:1;transform:none}

/* O serviço como está na agenda, em destaque: é a prova de que o método
   existe e tem preço. */
.met__servico{
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;row-gap:4px;align-items:baseline;
  margin-top:clamp(40px,8vw,56px);padding:clamp(18px,3vw,24px) 0;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
}
.met__servico-n{font:800 clamp(1.5rem,1.2rem + 1.2vw,2.1rem)/1.05 var(--f-disp);letter-spacing:-.03em}
.met__servico-d{grid-row:2;color:var(--ash);font-size:.95rem}
.met__servico-v{grid-row:1 / 3;grid-column:2;align-self:center;font:800 clamp(1.7rem,1.3rem + 1.4vw,2.5rem)/1 var(--f-disp);letter-spacing:-.03em;color:var(--gold-deep);white-space:nowrap}

.met__list{margin-top:clamp(28px,5vw,40px);border-bottom:1px solid var(--line-l)}
.met__it{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;row-gap:8px;
  border-top:1px solid var(--line-l);padding:clamp(22px,4vw,32px) 0;
}
.met__it:first-child{border-top:0}
.met__n{grid-row:1 / 3;font:600 .74rem/1 var(--f-body);letter-spacing:.16em;color:var(--gold-deep);padding-top:.7em}
.met__h{font:800 clamp(1.9rem,7.6vw,2.8rem)/1 var(--f-disp);letter-spacing:-.035em}
.met__it p{max-width:40ch;color:var(--ash);line-height:1.5}

@media (min-width:900px){
  .met{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:start}
  .met__head{grid-column:1 / 8;grid-row:1}
  .met__head .d-xl{font-size:min(8.4rem,9.2vw)}
  .met__fig{grid-column:8 / 13;grid-row:1 / 3;margin:0;max-width:none;position:sticky;top:calc(var(--hdr) + 24px)}
  .met__body{grid-column:1 / 7;grid-row:2}
}

/* ==========================================================================
   ASSINATURA - a única prancha no amarelo
   ========================================================================== */
.ass{background:var(--gold);color:var(--ink);padding:var(--sec) var(--pad)}
.ass__t{font-size:clamp(2.8rem,12.4vw,8.6rem)}
.ass__side{
  margin-top:clamp(36px,7vw,56px);padding-top:clamp(22px,4vw,30px);border-top:2px solid var(--ink);
  display:grid;gap:clamp(20px,3vw,28px);justify-items:start;
}
.ass__lead{font:600 clamp(1.2rem,1rem + .9vw,1.6rem)/1.25 var(--f-body);letter-spacing:-.01em;max-width:26ch;text-wrap:pretty}
.ass__uns{width:100%;border-top:1px solid rgba(13,30,39,.3)}
.ass__uns a{
  display:grid;grid-template-columns:minmax(0,1fr) auto 20px;align-items:center;column-gap:14px;
  min-height:64px;padding:12px 0;border-bottom:1px solid rgba(13,30,39,.3);
}
.ass__un{font:800 clamp(1.5rem,1.2rem + .9vw,1.9rem)/1 var(--f-disp);letter-spacing:-.03em}
.ass__qt{font:600 .95rem/1.2 var(--f-body);white-space:nowrap}
.ass__uns svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .45s var(--ease)}
@media (hover:hover){ .ass__uns a:hover svg{transform:translate(3px,-3px)} }

@media (min-width:900px){
  .ass{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:end}
  .ass__t{grid-column:1 / 8;font-size:min(8.6rem,9.1vw)}
  .ass__side{grid-column:8 / 13;margin:0 0 .4em}
}

/* ==========================================================================
   UNIDADES
   No celular cada casa traz a sua fachada; no desktop as fachadas ficam
   presas à esquerda e trocam conforme a casa que está no meio da tela.
   ========================================================================== */
.un{background:var(--bone);color:var(--ink);padding-bottom:var(--sec)}
.un__media{display:none}
.un__body{padding:clamp(56px,11vw,96px) var(--pad) 0}
.un__list{margin-top:clamp(36px,7vw,72px);border-bottom:1px solid var(--line-l)}
.un__it{position:relative;border-top:1px solid var(--line-l);padding:clamp(26px,5vw,40px) 0 clamp(28px,5vw,44px)}
.un__fig{position:relative;aspect-ratio:4 / 5;overflow:hidden;background:var(--bone-2);margin-bottom:clamp(22px,5vw,32px)}
.un__fig img{width:100%;height:100%;object-fit:cover}
.un__n{display:block;font:600 .74rem/1 var(--f-body);letter-spacing:.16em;color:var(--gold-deep);margin-bottom:12px}
.un__name{font:800 clamp(2.4rem,11vw,4.6rem)/.95 var(--f-disp);letter-spacing:-.04em}
.un__info{display:grid;gap:18px;margin-top:22px}
.un__info dt{font:600 .7rem/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--ash);margin-bottom:7px}
.un__info dd{font-size:1rem;line-height:1.5}
.lnk--tel{padding:2px 0 10px}
.un__cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px;margin-top:22px}
.un__app{margin-top:clamp(24px,4vw,36px);color:var(--ash)}
.un__app .lnk{color:var(--ink);padding:4px 0}
@media (min-width:600px){ .un__info{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px} }

@media (min-width:900px){
  .un{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);padding:var(--sec) var(--pad)}
  .un__media{display:block;grid-column:1 / 6;container-type:inline-size}
  .un__fotos{
    --h:min(125cqi, calc(100svh - 2 * var(--hdr) - 32px));
    position:sticky;top:calc((100svh - var(--h)) / 2);height:var(--h);overflow:hidden;background:var(--bone-2);
  }
  .un__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s ease,transform 1.6s var(--ease)}
  .un__foto.is-on{opacity:1;transform:none}
  .un__fig{display:none}
  .un__body{grid-column:7 / 13;padding:0}
  .un__body .d-xl{font-size:min(7.4rem,8.2vw)}
}

/* ==========================================================================
   GALERIA
   ========================================================================== */
.gal{padding:var(--sec) var(--pad);background:var(--ink)}
.gal__head{margin-bottom:clamp(36px,7vw,80px)}
.gal__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.g{min-width:0}
.g__a{position:relative;display:block;height:100%;overflow:hidden;background:var(--ink-2)}
.g__a img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.g--a,.g--d,.g--g{grid-column:span 2}
.g--a .g__a{aspect-ratio:4 / 5}
.g--b .g__a,.g--c .g__a,.g--e .g__a,.g--f .g__a{aspect-ratio:3 / 4}
.g--d .g__a{aspect-ratio:4 / 3}
.g--g .g__a{aspect-ratio:5 / 4}
@media (hover:hover){ .g__a:hover img{transform:scale(1.05)} }

@media (min-width:900px){
  .gal__grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(52px,6vw,92px);gap:clamp(12px,1.4vw,20px)}
  .g .g__a{aspect-ratio:auto}
  .g--a{grid-column:1 / 7;grid-row:1 / 10}
  .g--b{grid-column:7 / 10;grid-row:1 / 6}
  .g--c{grid-column:10 / 13;grid-row:2 / 7}
  .g--d{grid-column:7 / 13;grid-row:7 / 12}
  .g--e{grid-column:1 / 5;grid-row:11 / 17}
  .g--f{grid-column:5 / 9;grid-row:12 / 18}
  .g--g{grid-column:9 / 13;grid-row:13 / 19}
}

/* ---------- visualizador ---------- */
.lb{
  width:100vw;height:100vh;height:100svh;max-width:none;max-height:none;margin:0;border:0;padding:0;
  background:rgba(13,30,39,.97);color:var(--bone);overflow:hidden;
}
.lb::backdrop{background:rgba(13,30,39,.6)}
.lb[open]{display:grid;place-items:center}
.lb__fig{display:grid;gap:14px;justify-items:center;padding:72px var(--pad) 96px;max-width:100%}
.lb[open] .lb__fig{animation:lb-in .6s var(--ease)}
@keyframes lb-in{from{opacity:0;transform:scale(.96)}}
.lb__img{max-width:min(100%,1300px);max-height:calc(100svh - 190px);width:auto;height:auto;object-fit:contain;touch-action:pan-y}
.lb__cap{display:flex;gap:18px;font-size:.9rem;color:var(--smoke)}
.lb__count{color:var(--gold);font-variant-numeric:tabular-nums}
.lb__btn,.lb__close{position:absolute;display:grid;place-items:center;min-width:52px;min-height:52px}
.lb__btn svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6}
.lb__prev{left:calc(50% - 64px);bottom:24px}
.lb__next{left:calc(50% + 12px);bottom:24px}
.lb__close{top:12px;right:var(--pad);font:600 .9rem/1 var(--f-body)}
@media (min-width:900px){
  .lb__prev{left:var(--pad);bottom:auto;top:50%;transform:translateY(-50%)}
  .lb__next{left:auto;right:var(--pad);bottom:auto;top:50%;transform:translateY(-50%)}
}

/* ==========================================================================
   CTA FINAL - o mural de BH, escurecido
   ========================================================================== */
.fim{position:relative;isolation:isolate;overflow:hidden;padding:0 0 calc(var(--sec) * .7)}
.fim__media{position:relative;margin:0;aspect-ratio:4 / 5;max-height:80svh;overflow:hidden;background:var(--ink)}
.fim__media picture{display:block;width:100%;height:100%}
.fim__img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.fim__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,30,39,.35) 0%,rgba(13,30,39,0) 26%,rgba(13,30,39,.55) 64%,var(--ink) 100%);
}
.fim__body{
  position:relative;display:grid;gap:clamp(28px,6vw,52px);justify-items:start;
  margin-top:calc(clamp(92px,24vw,170px) * -1);padding:0 var(--pad);
}
.fim .btn{width:100%}
@media (min-width:600px){ .fim .btn{width:auto} }

@media (min-width:900px){
  .fim{display:flex;align-items:center;min-height:min(100svh,56vw);padding:var(--sec) var(--pad)}
  .fim__media{position:absolute;inset:0;z-index:-1;aspect-ratio:auto;max-height:none}
  .fim__img{filter:brightness(.6)}
  .fim__media::after{
    background:
      linear-gradient(90deg,rgba(13,30,39,.95) 0%,rgba(13,30,39,.78) 38%,rgba(13,30,39,.15) 72%,rgba(13,30,39,.35) 100%),
      linear-gradient(0deg,rgba(13,30,39,.6) 0%,rgba(13,30,39,0) 36%);
  }
  .fim__body{margin:0;padding:0;max-width:60%}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{background:var(--ink);border-top:1px solid var(--line-d);padding:clamp(56px,10vw,104px) var(--pad) calc(24px + env(safe-area-inset-bottom));overflow:hidden}
.ftr__cols{display:grid;gap:40px}
.ftr__h{font:600 .7rem/1 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.ftr__col p{color:var(--smoke);line-height:1.55}
.ftr__col p + p{margin-top:14px}
.ftr__col strong{color:var(--bone);font-weight:600}
.ftr__col .lnk{padding:6px 0;color:var(--bone)}
.ftr__col p:has(.lnk) + p{margin-top:2px}
.ftr__col--contato{display:flex;flex-direction:column;align-items:flex-start}
.ftr .ftr__col .ftr__marca{align-self:flex-end;margin-top:clamp(40px,8vw,56px);color:var(--bone)}
.ftr__word{display:block;font:900 clamp(3.2rem,6.2vw,6.4rem)/.8 var(--f-disp);letter-spacing:-.05em;color:var(--gold)}
.ftr__legal{margin-top:18px;font-size:.8rem;color:var(--ash)}
@media (min-width:700px){
  .ftr__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ftr .ftr__col--contato .ftr__marca{margin-top:auto;padding-top:32px}
}

/* ==========================================================================
   MOVIMENTO
   Os estados iniciais só existem com .js. Se o main.js não rodar, uma
   animação de 0s atrasada revela tudo.
   ========================================================================== */
.js [data-rv]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.js [data-rv].is-in{opacity:1;transform:none}

/* Folga da máscara: a Fraunces tem ascendente alto e o itálico avança à
   direita; a folga cobre os dois. */
.ln{display:block;overflow:hidden;padding:.2em .08em .18em 0;margin:-.2em -.08em -.18em 0}
.js .ln > span{display:block;transform:translateY(calc(100% + .42em));transition:transform 1.15s var(--ease);transition-delay:var(--d,0s)}
.js .ln.is-in > span{transform:none}

/* Foto que abre de baixo para cima enquanto desinfla: a
   máscara é uma cortina na cor do fundo que encolhe para o topo. */
.js .clip[data-rv]{opacity:1;transform:none}
.js .clip[data-rv]::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--ink);transform-origin:50% 0;
  transition:transform 1.25s var(--ease-io);transition-delay:var(--d,0s);
}
[data-tone="light"] .clip[data-rv]::before{background:var(--bone)}
.js .clip[data-rv] img{transform:scale(1.2);transition:transform 1.8s var(--ease);transition-delay:var(--d,0s)}
.js .clip[data-rv].is-in::before{transform:scaleY(0)}
.js .clip[data-rv].is-in img{transform:none}
@media (hover:hover){ .js .g__a.clip.is-in:hover img{transform:scale(1.05);transition-delay:0s} }

/* Entrada do hero: foto, letras do nome (uma a uma), linha, CTA. O CTA é
   clicável desde o início. */
.js .hero__img{opacity:0;transform:scale(1.12);transition:opacity .8s ease,transform 2s var(--ease)}
.js [data-in]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .9s var(--ease);transition-delay:calc(var(--i) * .06s + .1s)}
.js .hero__l > span[data-in]{opacity:1;transform:translateY(108%)}
html.is-ready .hero__img{opacity:1;transform:none}
html.is-ready [data-in],html.is-ready .hero__l > span[data-in]{opacity:1;transform:none}
[data-in="1"]{--i:1}[data-in="2"]{--i:2}[data-in="3"]{--i:2.6}[data-in="4"]{--i:3.2}
[data-in="5"]{--i:3.8}[data-in="5b"]{--i:4.4}[data-in="6"]{--i:6.2}[data-in="7"]{--i:7.2}[data-in="8"]{--i:8.4}

@keyframes fallback{to{opacity:1;transform:none;stroke-dashoffset:0}}
@keyframes cortina{to{transform:scaleY(0)}}
html.js:not(.rv-on) [data-rv],
html.js:not(.rv-on) .ln > span,
html.js:not(.rv-on) [data-in],
html.js:not(.rv-on) .hero__img,
html.js:not(.rv-on) .met__cotas,
html.js:not(.rv-on) .traco path,
html.js:not(.rv-on) .clip[data-rv] img{animation:fallback 0s 2.5s forwards}
html.js:not(.rv-on) .clip[data-rv]::before{animation:cortina 0s 2.5s forwards}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .faixa__trilho{animation:none!important}
  .js [data-rv],.js .ln > span,.js [data-in],.js .hero__l > span[data-in],.js .hero__img,.js .met__cotas,
  .js .clip[data-rv],.js .clip[data-rv] img{opacity:1!important;transform:none!important}
  .js .clip[data-rv]::before{display:none}
  .js .traco path{stroke-dashoffset:0!important}
  .hero__media,.hero__body{transform:none!important}
  .menu{clip-path:none}
  .menu__nav a{opacity:1;transform:none}
}