/* ==========================================================================
   Mariana Accorsini Paisagismo
   Uma família tipográfica, nenhuma cor de destaque, nenhum filete decorativo.
   A página é uma moldura de papel; dentro dela, fotografia.
   Medidas tiradas de danielnunes.com.br: margem 6vw, grade 4x quadrado,
   goteira 20px, galeria em 3 colunas com 14px.
   ========================================================================== */

:root{
  --papel:#DAD5CE;
  --tinta:#1A1A16;
  --tinta-2:#6E6E64;
  --véu:rgba(26,26,22,.14);      /* único filete: separar o rodapé */
  --sala:#12120F;

  --m:clamp(16px,6vw,86px);      /* margem da página  (86/1440) */
  --banda:90px;                  /* faixa de papel sob a capa */
  --hdr:82px;
  --goteira:20px;                /* grade do portfólio */
  --gal:14px;                    /* galeria de projeto */

  --fonte:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Futura,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden;background:var(--papel);color:var(--tinta)}
body{
  font:300 16px/1.5 var(--fonte);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100svh;display:flex;flex-direction:column;
}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:300;font-size:inherit;line-height:inherit}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
main{flex:1}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}

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

/* ---------- os três tamanhos de letra que o site inteiro usa ---------- */
.ui{font-size:11px;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.nome{font-size:35px;line-height:1.15}                    /* título de projeto */
.legenda{font-size:19px;line-height:1.3}                  /* nome sob a miniatura */

a.lnk{border-bottom:1px solid transparent;transition:border-color .18s}
a.lnk:hover,a.lnk:focus-visible{border-bottom-color:currentColor}
:focus-visible{outline:1px solid var(--tinta);outline-offset:3px}

/* ---------- cabeçalho ---------- */
.hdr{
  position:sticky;top:0;z-index:30;height:var(--hdr);flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--m);background:var(--papel);
}
.marca{font-size:13px;letter-spacing:.04em;white-space:nowrap}
.marca b{font-weight:400}

.nav{display:flex;align-items:center;gap:26px}
.nav a{font-size:11px;letter-spacing:.04em;text-transform:uppercase;
       border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .18s}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:currentColor}

/* ---------- botão do menu: duas réguas que viram X ----------
   Cada régua gira 135°, não os 45° do hambúrguer de sempre: é o giro longo,
   que passa pela vertical no meio do caminho e ali as duas se sobrepõem —
   o instante mais estreito. Ao assentar no X elas encurtam 18%, medido
   quadro a quadro no vídeo de referência (a caixa do X dá 244px onde o giro
   puro daria 296). O "=" está escrito no CSS: se o JS cair, o ícone fica lá. */
.menu-btn{display:none;position:relative;width:44px;height:44px;margin-right:-11px}
.menu-btn i{
  position:absolute;left:50%;top:50%;width:22px;height:1.5px;
  margin:-.75px 0 0 -11px;            /* centro da régua no centro do botão: é onde elas se cruzam */
  background:currentColor;
  transition:transform .34s cubic-bezier(.22,1,.36,1);   /* vertical aos ~20%, como no vídeo */
}
/* os dois estados repetem a mesma lista de funções, para o navegador
   interpolar uma a uma em vez de cair na conta por matriz */
.menu-btn i:first-child{transform:translateY(-4.25px) rotate(0deg) scaleX(1)}
.menu-btn i:last-child {transform:translateY(4.25px)  rotate(0deg) scaleX(1)}
[data-menu="open"] .menu-btn i:first-child{transform:translateY(0) rotate(135deg)  scaleX(.82)}
[data-menu="open"] .menu-btn i:last-child {transform:translateY(0) rotate(-135deg) scaleX(.82)}
.nav a.inicio{display:none}                       /* no computador o nome da casa já vai para o início */
.nav .pe{display:none}                            /* telefone e Instagram só no painel do celular */

/* ---------- capa da home: moldura de papel, fotos em dissolução ----------
   Todos os slides ficam empilhados no mesmo lugar. Sem JS, o primeiro
   (`is-on` escrito no HTML) é o único visível — a home nunca fica em branco. */
/* qualquer carrossel: slides empilhados, o primeiro marcado no HTML.
   Sem JS fica a primeira foto parada — a página nunca abre em branco. */
[data-carrossel]{position:relative}
[data-carrossel] picture{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
[data-carrossel] picture.is-on{opacity:1}
[data-carrossel] img{width:100%;height:100%;object-fit:cover;display:block}

.capa{margin:0 var(--m);height:calc(100svh - var(--hdr) - var(--banda))}
.retratos{aspect-ratio:4/5}          /* o carrossel da página Sobre */

/* setas: sempre fora da fotografia, e do lado oposto ao botão do WhatsApp */
.foto-nav{
  position:absolute;top:100%;left:0;height:52px;
  display:flex;align-items:center;gap:6px;
  font-size:11px;letter-spacing:.04em;color:var(--tinta-2);
}
.capa .foto-nav{height:var(--banda)}
.foto-nav button{
  width:40px;height:40px;display:grid;place-items:center;
  font-size:19px;line-height:1;color:var(--tinta);
}
.foto-nav button:hover{opacity:.55}
.foto-nav__n{min-width:34px;text-align:center}
.foto-nav__n b{font-weight:400;color:var(--tinta)}
body.home{overflow:hidden}
body.home .hdr{position:fixed;inset:0 0 auto;width:100%}
body.home main{padding-top:var(--hdr)}

/* ---------- páginas internas ---------- */
.pag{padding:calc(var(--hdr) * .55) var(--m) 96px}
.pag--larga{padding-left:var(--gal);padding-right:var(--gal)}

/* ---------- grade do portfólio: quadrados 4 x ---------- */
.grade{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--goteira);
  padding:calc(var(--hdr) * .55) var(--m) 96px;
}
.grade figure{margin:0}
.grade img{aspect-ratio:1;object-fit:cover}
.grade figcaption{margin-top:12px;font-size:19px;line-height:1.3}
.grade a:hover img{opacity:.86;transition:opacity .2s}
.grade img{transition:opacity .2s}

/* ---------- página de projeto ---------- */
.ident{padding:calc(var(--hdr) * .55) var(--m) 0}
.ident h2{font-size:35px;line-height:1.15}
.ficha{margin:22px 0 0;font-size:16px;line-height:1.45}
.ficha div{display:block}                          /* uma linha de texto que quebra sozinha */
.ficha dt,.ficha dd{display:inline;margin:0}
.ficha dt{color:var(--tinta-2)}
.ficha dt::after{content:': '}
.resumo{margin:22px 0 0;max-width:58ch;font-size:16px;line-height:1.5;color:var(--tinta-2)}

/* galeria: colunas de alturas naturais, como uma prancha de contato */
.galeria{padding:44px var(--gal) 0;column-count:3;column-gap:var(--gal)}
.galeria figure{margin:0 0 var(--gal);break-inside:avoid}
.galeria button{display:block;width:100%}
.galeria img{transition:opacity .2s}
.galeria button:hover img{opacity:.86}

.pe-materia{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  flex-wrap:wrap;padding:64px var(--m) 0;
}
.pe-materia .nome{font-size:35px}

/* ---------- sobre / contato ---------- */
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:var(--goteira);align-items:start}
.dupla .texto{max-width:52ch;font-size:16px;line-height:1.6}
.dupla .texto p{margin-bottom:1.15em}
.dupla img{aspect-ratio:4/5;object-fit:cover}
.dupla .retratos{margin-bottom:52px}   /* lugar para as setas */

.linhas{margin:40px 0 0;font-size:16px}
.linhas div{display:flex;gap:.4em;padding:9px 0;border-top:1px solid var(--véu)}
.linhas div:last-child{border-bottom:1px solid var(--véu)}
.linhas dt{margin:0;color:var(--tinta-2);flex:0 0 132px}
.linhas dd{margin:0}

/* ---------- serviços: mesma grade do portfólio ---------- */
.servicos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--goteira);
           padding:calc(var(--hdr) * .55) var(--m) 0}
.servicos figure{margin:0}
.servicos img{aspect-ratio:1;object-fit:cover}
.servicos h2{margin-top:12px;font-size:19px;line-height:1.3}
.servicos p{margin-top:6px;font-size:16px;line-height:1.5;color:var(--tinta-2)}
.servicos p:empty{display:none}

/* ---------- rodapé ---------- */
.foot{
  margin:auto var(--m) 0;padding:20px 64px 28px 0;border-top:1px solid var(--véu);
  display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline;
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-2);
}
.foot .dir{margin-left:auto}

/* ---------- atalho do WhatsApp: fica em todas as páginas ----------
   Pousa sobre a faixa de papel, nunca sobre a fotografia. */
.zap{
  position:fixed;right:20px;bottom:20px;z-index:35;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--tinta);color:var(--papel);
  transition:transform .18s ease,opacity .2s ease;
}
.zap svg{width:23px;height:23px;display:block}
.zap:hover,.zap:focus-visible{transform:scale(1.06)}
[data-menu="open"] .zap{opacity:0;pointer-events:none}

/* ---------- sala escura (foto ampliada) ---------- */
.sala{
  position:fixed;inset:0;z-index:60;background:var(--sala);
  display:flex;align-items:center;justify-content:center;padding:4vmin;
}
.sala[hidden]{display:none}
.sala img{max-width:100%;max-height:92svh;width:auto;object-fit:contain}
.sala button{position:absolute;color:#DAD5CE;line-height:1}
.sala__x{top:16px;right:20px;font-size:30px}
.sala__seta{top:50%;transform:translateY(-50%);font-size:46px;padding:0 14px}
.sala__seta--ant{left:8px} .sala__seta--pro{right:8px}
.sala__cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:rgba(218,213,206,.66)}

/* ==========================================================================
   Telas menores
   ========================================================================== */
@media (max-width:1100px){
  .grade{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:900px){
  :root{--hdr:62px}
  .nav{
    position:fixed;inset:0;z-index:40;background:var(--papel);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:0;padding:0 var(--m);
    opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;
  }
  [data-menu="open"] .nav{opacity:1;visibility:visible}
  .nav a{font-size:26px;letter-spacing:0;text-transform:none;padding:11px 0;border:0}
  .nav a[aria-current="page"]{color:var(--tinta-2)}
  .nav .pe{margin-top:34px;display:flex;flex-direction:column;gap:7px;
           font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-2)}
  .nav .pe a{font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:0}
  .menu-btn{display:block;z-index:41}
  .nav a.inicio{display:block}
  .nav .pe{display:flex}

  .galeria{column-count:2}
  .dupla{grid-template-columns:1fr;gap:32px}
  .dupla img{aspect-ratio:3/2}
  .dupla .retratos{aspect-ratio:3/2}
  .servicos{grid-template-columns:1fr 1fr}
  .pe-materia{padding-top:48px}
}

@media (max-width:640px){
  .grade{grid-template-columns:repeat(2,1fr);gap:12px}
  .grade figcaption{font-size:16px;margin-top:9px}
  .galeria{column-count:1;padding-left:var(--m);padding-right:var(--m)}
  .servicos{grid-template-columns:1fr;gap:34px}
  :root{--banda:68px}                      /* faixa que cabe o botão do WhatsApp e as setas */
  .foto-nav button{width:44px;height:44px}
  .ident h2,.pe-materia .nome{font-size:27px}
  .linhas dt{flex:0 0 106px}
  .foot{gap:6px 18px;padding:20px 0 76px}   /* espaço para o botão do WhatsApp */
  .foot .dir{margin-left:0;flex-basis:100%}
  .sala__seta{font-size:34px}
  .zap{right:16px;bottom:16px;width:44px;height:44px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}