/* =========================================================
   Spazio Decor
   Minimalista: uma tipografia, poucas cores, sem molduras.
   O que separa as coisas é espaço, não borda.
   ========================================================= */

:root{
  --bordo:#4D1A21;
  --bordo-fundo:#3A1319;
  --vinho:#8B3540;

  --papel:#FAF8F6;
  --branco:#FFFFFF;
  --linha:#E7DFDA;
  --tinta:#2A2522;
  --suave:#8C807A;

  --zap:#25D366;
  --zap-fundo:#1EBE5A;

  --larg:1200px;
  --topo-h:64px;
  --barra-h:56px;
  --t:.3s cubic-bezier(.4,0,.2,1);

  --zap-icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0 0 20.465 3.488'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:var(--topo-h);
  /* trava qualquer arrasto lateral da página inteira */
  overflow-x:hidden;
  max-width:100%;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
}

body{
  margin:0;
  /* a barra fixa de contato cobre o rodapé no celular sem esta folga */
  padding-bottom:var(--barra-h);
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  color:var(--tinta);
  background:var(--papel);
  overflow-x:hidden;
  max-width:100%;
  position:relative;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit}
/* nenhuma palavra longa pode estourar a largura da tela */
h1,h2,p,dd,li{overflow-wrap:break-word}

.container{width:100%; max-width:var(--larg); margin-inline:auto; padding-inline:20px}

/* atalho de acessibilidade: escondido sem jogar nada para fora da tela
   (o truque antigo do left:-9999px pode gerar arrasto lateral) */
.pular{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.pular:focus{
  position:fixed; top:0; left:0; z-index:200;
  width:auto; height:auto; margin:0; padding:12px 20px;
  clip-path:none;
  background:var(--bordo); color:#fff;
}

:where(a,button,iframe):focus-visible{outline:2px solid var(--vinho); outline-offset:4px}

/* ------------------------------------------------ tipografia */
h1,h2{font-weight:200; letter-spacing:-.015em; line-height:1.12; margin:0}

h1{font-size:clamp(2.4rem, 1.3rem + 4.4vw, 4.4rem)}
h2{font-size:clamp(1.65rem, 1.15rem + 2.1vw, 2.7rem); color:var(--bordo)}

p{margin:0 0 1.1em}
b{font-weight:400}

.rotulo{
  font-size:.7rem; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--vinho);
  margin:0 0 20px;
}
.rotulo--claro{color:rgba(255,255,255,.55)}

/* ------------------------------------------------ blocos */
.bloco{padding:clamp(72px, 10vw, 132px) 0}
.bloco__topo{max-width:46ch; margin-bottom:clamp(40px, 6vw, 68px)}
.bloco__linha{color:var(--suave); margin:20px 0 0}

/* ------------------------------------------------ botões */
.botao{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.9rem; font-weight:400; letter-spacing:.06em;
  padding:14px 26px;
  text-decoration:none;
  border:1px solid transparent;
  transition:var(--t);
}
.botao--zap{background:var(--zap); color:#fff}
.botao--zap:hover{background:var(--zap-fundo)}
.botao--vazio{color:#fff; border-color:rgba(255,255,255,.4)}
.botao--vazio:hover{border-color:#fff; background:rgba(255,255,255,.08)}

i.zap{
  width:17px; height:17px; flex:none;
  background:currentColor;
  -webkit-mask:var(--zap-icone) center/contain no-repeat;
  mask:var(--zap-icone) center/contain no-repeat;
}

/* ------------------------------------------------ topo */
.topo{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--topo-h);
  display:flex; align-items:center;
  transition:background var(--t), box-shadow var(--t);
}
.topo--fundo{background:var(--bordo)}

.topo__linha{display:flex; align-items:center; gap:20px; width:100%}

.topo__logo{flex:none; line-height:0}
.topo__logo img{width:76px}

.menu{display:none; margin-left:auto; gap:34px}
.menu a{
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72); text-decoration:none;
  transition:color var(--t);
}
.menu a:hover{color:#fff}

.topo__zap{
  display:none; align-items:center; gap:8px;
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; text-decoration:none;
  padding:9px 18px; background:var(--zap);
  transition:background var(--t);
}
.topo__zap:hover{background:var(--zap-fundo)}

.menu-botao{
  margin-left:auto; width:46px; height:46px;   /* alvo de toque confortável */
  display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:6px;
  background:none; border:0; padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.menu-botao span{display:block; height:1px; background:#fff; transition:var(--t)}
.menu-botao span:nth-child(1){width:22px}
.menu-botao span:nth-child(2){width:14px}
.menu-botao[aria-expanded="true"] span:nth-child(1){width:20px; transform:translateY(3.5px) rotate(45deg)}
.menu-botao[aria-expanded="true"] span:nth-child(2){width:20px; transform:translateY(-3.5px) rotate(-45deg)}

/* ------------------------------------------------ capa */
.capa{
  position:relative;
  min-height:70svh;
  display:flex; align-items:center;
  padding:calc(var(--topo-h) + 28px) 0 36px;
  background:var(--bordo);
  overflow:hidden;
}
@supports not (height: 1svh){ .capa{min-height:70vh} }

.capa__foto{position:absolute; inset:0}
/* no celular o recorte é forte: enquadra a entrada iluminada, não a lateral */
.capa__foto img{width:100%; height:100%; object-fit:cover; object-position:60% 46%}

/* Celular: véu bordô por cima da foto inteira, senão o texto some. */
.capa::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(178deg,
    rgba(58,19,25,.90) 0%,
    rgba(58,19,25,.68) 42%,
    rgba(58,19,25,.88) 100%);
}

.capa__texto{position:relative; z-index:2; color:#fff}
/* medidas em em/rem, nunca ch: ch se baseia na fonte do próprio
   elemento, e o contêiner herda o corpo, não o tamanho do título */
.capa h1{max-width:11em}
.capa__linha{
  font-size:clamp(1rem, .95rem + .3vw, 1.15rem);
  color:rgba(255,255,255,.8);
  max-width:24em;
  margin:22px 0 34px;
}
.capa__acoes{display:flex; flex-wrap:wrap; gap:12px}

/* ------------------------------------------------ credenciais */
/* sem fundo próprio e sem borda: emenda direto na seção seguinte */
.credenciais{background:transparent}
.credenciais ul{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:30px 24px;
  list-style:none; margin:0;
  padding:clamp(40px, 6vw, 66px) 0 0;
}
.credenciais li{
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--suave);
  display:flex; flex-direction:column; gap:6px;
}
.credenciais b{
  font-size:clamp(1.75rem, 1.2rem + 2.2vw, 3.4rem);
  font-weight:200; letter-spacing:-.025em;
  text-transform:none; color:var(--bordo); line-height:1;
}

/* a seção logo abaixo não precisa do respiro cheio de topo */
.credenciais + .bloco{padding-top:clamp(46px, 6vw, 74px)}

/* ------------------------------------------------ peças */
.pecas{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}

.peca{
  display:block; text-decoration:none;
  background:var(--branco);
  transition:var(--t);
}
.peca img{width:100%; aspect-ratio:1; object-fit:contain; transition:transform var(--t)}
.peca span{
  display:block; text-align:center;
  padding:0 8px 16px;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--suave);
  transition:color var(--t);
}
.peca:hover img{transform:scale(1.04)}
.peca:hover span{color:var(--bordo)}

/* ------------------------------------------------ ambientes */
.ambientes{background:var(--branco); padding:clamp(72px, 10vw, 132px) 0}
.ambientes[hidden]{display:none}
.ambientes .bloco__linha{max-width:46em; margin-bottom:clamp(40px, 6vw, 64px)}
.ambientes__grade{display:grid; gap:12px}
.ambientes__grade img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  background:var(--papel);
}

/* ------------------------------------------------ detalhes */
.detalhe{
  background:var(--bordo);
  color:#fff;
  padding:clamp(66px, 9vw, 110px) 0 clamp(56px, 8vw, 92px);
  overflow:hidden;
}
.detalhe h2{color:#fff}
.detalhe__topo{display:flex; align-items:flex-end; justify-content:space-between; gap:24px}

/* setas: só fazem sentido onde existe mouse */
.detalhe__setas{display:none; gap:8px; flex:none; padding-bottom:4px}
@media (hover:hover) and (pointer:fine){
  .detalhe__setas{display:flex}
}
.seta{
  width:44px; height:44px;
  background:transparent;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  cursor:pointer;
  position:relative;
  transition:var(--t);
}
.seta:hover:not(:disabled){background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.55)}
.seta:disabled{opacity:.25; cursor:default}
.seta::before{
  content:''; position:absolute; top:50%; left:50%;
  width:9px; height:9px;
  border-top:1px solid #fff; border-right:1px solid #fff;
}
.seta--prox::before{transform:translate(-65%,-50%) rotate(45deg)}
.seta--ant::before{transform:translate(-35%,-50%) rotate(-135deg)}

.detalhe__faixa{
  display:flex; gap:14px;
  margin-top:clamp(36px, 5vw, 56px);
  padding-inline:20px;
  overflow-x:auto;
  /* o arrasto lateral morre aqui e não vaza para a página */
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.detalhe__faixa::-webkit-scrollbar{display:none}
.detalhe__faixa:focus-visible{outline:2px solid rgba(255,255,255,.7); outline-offset:-4px}
.detalhe__faixa img{
  flex:none; width:min(76vw, 380px); aspect-ratio:4/3;
  object-fit:cover; scroll-snap-align:center;
  user-select:none; -webkit-user-drag:none;
}

/* arrastar com o mouse, já que a barra de rolagem fica escondida */
@media (hover:hover) and (pointer:fine){
  .detalhe__faixa{cursor:grab}
  .detalhe__faixa.arrastando{cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto}
}

/* ------------------------------------------------ linha completa */
.linha{background:var(--branco); text-align:center}
.linha h2{margin-bottom:34px}
.linha .rotulo{color:var(--vinho)}
.linha__itens{
  font-size:clamp(1.05rem, .95rem + .6vw, 1.45rem);
  font-weight:200;
  color:var(--bordo);
  max-width:34ch;
  margin:0 auto 40px;
  line-height:2;
}
.linha__itens i{color:var(--linha); font-style:normal; padding:0 4px}

/* ------------------------------------------------ decoração */
.decor{
  background:var(--bordo);
  color:rgba(255,255,255,.75);
  padding:clamp(72px, 10vw, 132px) 0;
}
.decor h2{color:#fff; margin-bottom:28px}
.decor b{color:#fff}
.decor p{max-width:46ch}
.decor .botao{margin-top:14px}
.decor__grade{display:grid; gap:52px}

.decor__passos{
  list-style:none; counter-reset:p;
  margin:0; padding:0;
  border-top:1px solid rgba(255,255,255,.16);
}
.decor__passos li{
  counter-increment:p;
  padding:18px 0 18px 44px;
  position:relative;
  font-size:.95rem;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.decor__passos li::before{
  content:counter(p,decimal-leading-zero);
  position:absolute; left:0; top:18px;
  font-size:.75rem; letter-spacing:.1em;
  color:rgba(255,255,255,.4);
}

/* ------------------------------------------------ showroom */
.showroom{background:var(--papel)}
.showroom__grade{display:grid; gap:40px; align-items:center}
.showroom p{color:var(--suave); max-width:46ch}
.showroom h2{margin-bottom:24px}
.showroom .botao{margin-top:10px}

/* ------------------------------------------------ contato */
.contato{background:var(--branco)}
.contato h2{margin-bottom:clamp(36px, 5vw, 56px)}
.contato__grade{display:grid; gap:44px}

.contato dl{margin:0}
.contato dt{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--suave);
  margin-top:26px;
}
.contato dt:first-child{margin-top:0}
.contato dd{margin:5px 0 0; font-size:1.02rem; line-height:1.6}
.contato dd a{color:var(--bordo); text-decoration:none; border-bottom:1px solid var(--linha)}
.contato dd a:hover{border-color:var(--bordo)}

.contato iframe{width:100%; height:100%; min-height:340px; border:0; display:block}

/* ------------------------------------------------ chamada final */
.final{
  background:var(--papel);
  padding:clamp(72px, 10vw, 120px) 0;
  text-align:center;
  border-top:1px solid var(--linha);
}
.final h2{margin-bottom:32px}

/* ------------------------------------------------ rodapé */
.rodape{background:var(--bordo-fundo); color:rgba(255,255,255,.6); padding:64px 0 40px}
.rodape__grade{display:grid; gap:28px}
.rodape img{width:132px}
.rodape p{margin:0; font-size:.9rem; line-height:1.8}
.rodape a{text-decoration:none; transition:color var(--t)}
.rodape a:hover{color:#fff}
.rodape__legal{font-size:.78rem; color:rgba(255,255,255,.38)}

/* ------------------------------------------------ fixos */
.zap-fixo{
  display:none;
  position:fixed; right:28px; bottom:28px; z-index:90;
  width:54px; height:54px; border-radius:50%;
  background:var(--zap); color:#fff;
  place-items:center;
  box-shadow:0 6px 24px rgba(37,211,102,.4);
  transition:var(--t);
}
.zap-fixo:hover{background:var(--zap-fundo); transform:scale(1.06)}
.zap-fixo i.zap{width:27px; height:27px}

.barra{
  position:fixed; inset:auto 0 0 0; z-index:95; display:flex;
  /* respeita a faixa de gestos do iPhone */
  padding-bottom:env(safe-area-inset-bottom, 0);
}
.barra a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--barra-h);
  padding:0 8px;
  font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none;
  background:var(--bordo); color:#fff;
  -webkit-tap-highlight-color:transparent;
}
.barra a:first-child{flex:0 0 38%}
.barra__zap{background:var(--zap)!important}

/* ------------------------------------------------ cookies */
.cookies{
  position:fixed; z-index:96;
  left:12px; right:12px;
  bottom:calc(var(--barra-h) + 12px + env(safe-area-inset-bottom, 0px));
  background:var(--branco);
  border:1px solid var(--linha);
  padding:16px 18px;
  display:flex; flex-direction:column; gap:12px;
}
.cookies[hidden]{display:none}
.cookies p{margin:0; font-size:.8rem; line-height:1.5; color:var(--suave)}
.cookies a{color:var(--bordo)}
.cookies div{display:flex; gap:8px}
.cookies button{
  flex:1; font-family:inherit; font-size:.78rem; letter-spacing:.08em;
  padding:10px 16px; cursor:pointer; border:1px solid var(--linha);
  background:transparent; color:var(--suave); transition:var(--t);
}
.cookies #cookies-sim{background:var(--bordo); border-color:var(--bordo); color:#fff}

/* =========================================================
   RESPONSIVO
   ========================================================= */

/* ---- celular e tablet: peso 200 fica fino demais em tela pequena ---- */
@media (max-width:919px){
  h1,h2{font-weight:300}
  .capa h1{text-shadow:0 1px 18px rgba(0,0,0,.4)}
  .capa__linha{text-shadow:0 1px 12px rgba(0,0,0,.45)}
}

/* ---- celular estreito: alvos maiores e menos aperto ---- */
@media (max-width:479px){
  .container{padding-inline:18px}
  .peca span{padding:0 6px 12px; font-size:.68rem}
  .pecas{gap:8px}
  .bloco{padding:56px 0}
  .credenciais + .bloco{padding-top:40px}

  /* botão que ocupa a linha inteira é muito mais fácil de acertar com o dedo */
  .capa__acoes{flex-direction:column; align-items:stretch}
  .capa__acoes .botao,
  .linha .botao,
  .decor .botao,
  .showroom .botao,
  .final .botao{width:100%; justify-content:center}

  .capa__linha{margin:18px 0 28px}
  .pecas{gap:10px}
  .detalhe__faixa{padding-inline:18px; gap:10px}
  .detalhe__faixa img{width:82vw}
  .decor__grade{gap:36px}
  .showroom__grade{gap:28px}
  .contato__grade{gap:32px}
  .contato iframe{min-height:260px}
  .rodape{padding:48px 0 32px}
}

/* ---- menu em painel (celular e tablet) ---- */
@media (max-width:919px){
  .menu{
    position:fixed; top:var(--topo-h); left:0; right:0;
    display:flex; flex-direction:column; gap:0;
    background:var(--bordo);
    padding:8px 24px 24px;
    margin:0;
    opacity:0; visibility:hidden;
    transform:translateY(-8px);
    transition:opacity var(--t), transform var(--t), visibility var(--t);
  }
  .menu--aberto{opacity:1; visibility:visible; transform:none}
  .menu a{
    font-size:1rem; letter-spacing:.12em;
    padding:16px 0;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .menu a:last-child{border-bottom:0}
  body.travado{overflow:hidden}
}

@media (min-width:560px){
  .credenciais ul{grid-template-columns:repeat(3,1fr)}
  .pecas{grid-template-columns:repeat(3,1fr)}
  .rodape__grade{grid-template-columns:auto 1fr auto; align-items:center; gap:40px}
  .rodape__legal{text-align:right}
  .cookies{
    left:auto; right:24px; bottom:24px; max-width:420px;
    flex-direction:row; align-items:center; gap:18px;
  }
  .cookies div{flex:none}
  .cookies button{flex:none}
}

@media (min-width:920px){
  :root{--topo-h:80px}
  body{padding-bottom:0; font-size:17px}   /* a barra fixa não existe aqui */
  .menu-botao{display:none}
  .menu{display:flex}
  .topo__zap{display:inline-flex}
  .topo__logo img{width:104px}
  .container{padding-inline:24px}

  /* A foto ocupa só a direita; a esquerda é o bordô da própria seção.
     O `right` negativo joga a foto mais para a direita e sangra para fora
     da tela — o que sai do quadro é céu e estacionamento. */
  .capa__foto{left:30%; right:-10%}
  .capa::after{
    background:
      linear-gradient(90deg,
        var(--bordo)           0%,
        var(--bordo)          30%,
        rgba(77,26,33,.88)    38%,
        rgba(77,26,33,.55)    48%,
        rgba(77,26,33,.20)    60%,
        rgba(77,26,33,0)      73%),
      linear-gradient(180deg,
        rgba(28,9,12,.26)      0%,
        rgba(28,9,12,0)       36%,
        rgba(28,9,12,0)       66%,
        rgba(28,9,12,.30)    100%);
  }

  /* texto colado na esquerda, fora do contêiner centralizado */
  .capa__texto{
    max-width:none;
    margin-inline:0;
    padding-left:clamp(40px, 5vw, 96px);
    padding-right:24px;
  }
  .capa__linha{max-width:21em}

  .pecas{grid-template-columns:repeat(4,1fr); gap:24px}
  .ambientes__grade{grid-template-columns:1fr 1fr; gap:20px}
  /* a primeira ocupa a largura toda: é a que dá a noção do espaço */
  .ambientes__grade img:first-child{grid-column:1 / -1; aspect-ratio:2.4/1}
  .decor__grade{grid-template-columns:1.1fr .9fr; gap:80px; align-items:start}
  .showroom__grade{grid-template-columns:1fr 1fr; gap:64px}
  .contato__grade{grid-template-columns:1fr 1.15fr; gap:64px}

  .barra{display:none}
  .zap-fixo{display:grid}
}

@media (min-width:1248px){
  .detalhe__faixa{padding-inline:calc((100vw - var(--larg)) / 2 + 24px)}
}