/* ═══════════════════════════════════════════════════════════
   Beatriz Engler — portfólio
   Identidade herdada do PDF original: papel #F4F1ED, tinta quase
   preta, Cormorant Garamond em caixa alta com tracking largo,
   Alice no texto corrido e filetes pretos de 1px como moldura.
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:#F4F1ED;
  --paper-2:#EDE9E2;
  --ink:#0E0E0D;
  --ink-70:#474645;
  --ink-45:rgba(14,14,13,.45);
  --line:rgba(14,14,13,.18);
  --line-soft:rgba(14,14,13,.09);

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"Alice",Georgia,"Times New Roman",serif;

  --wrap:1240px;
  --pad:clamp(1.25rem,5vw,4rem);
  --sec-y:clamp(4.5rem,11vw,9rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video,svg{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}

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

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:.75rem 1.25rem;
}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* ── filetes verticais (motivo gráfico da capa do PDF) ───────── */
.rule{position:absolute;width:1.5px;background:var(--ink);pointer-events:none}
.rule--a{top:0;right:9%;height:38%}
.rule--b{bottom:0;left:11%;height:46%}
.rule--c{top:0;right:8%;height:30%}
@media (max-width:800px){.rule{display:none}}

/* ══════════════ NAV ══════════════ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:90;
  transition:background .4s var(--ease),box-shadow .4s var(--ease);
}
.nav.is-stuck{
  background:rgba(244,241,237,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
}
.nav__in{
  max-width:var(--wrap);margin-inline:auto;
  padding:1.15rem var(--pad);
  display:flex;align-items:center;gap:2rem;
}
.nav__brand{
  font-family:var(--serif);font-size:1.05rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  white-space:nowrap;
}
.nav__links{display:flex;gap:1.9rem;margin-left:auto}
.nav__links a{
  font-size:.73rem;letter-spacing:.19em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-70);position:relative;padding-block:.35rem;
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--ink);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}

.nav__cta{
  font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--ink);padding:.6rem 1.15rem;white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.nav__cta:hover{background:var(--ink);color:var(--paper)}

.nav__burger{display:none;width:34px;height:34px;margin-left:auto;position:relative}
.nav__burger span{
  position:absolute;left:5px;right:5px;height:1.5px;background:var(--ink);
  transition:transform .35s var(--ease),opacity .25s;
}
.nav__burger span:nth-child(1){top:12px}
.nav__burger span:nth-child(2){top:20px}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

.nav__mobile{
  background:var(--paper);border-top:1px solid var(--line);
  padding:.5rem var(--pad) 1.5rem;
}
.nav__mobile a{
  display:block;padding:.85rem 0;text-decoration:none;
  font-family:var(--serif);font-size:1.25rem;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--line-soft);
}

@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
  .nav.is-open{background:var(--paper)}
}
@media (min-width:901px){.nav__mobile{display:none}}

/* ══════════════ HERO ══════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding:clamp(7rem,14vh,10rem) 0 clamp(4rem,10vh,7rem);
}
.hero__in{
  max-width:var(--wrap);margin-inline:auto;width:100%;
  padding-inline:var(--pad);
  display:grid;grid-template-columns:1.05fr .85fr;
  gap:clamp(2rem,6vw,5rem);align-items:center;
}
.eyebrow{
  margin:0 0 1.4rem;font-size:.7rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--ink-70);
}
.hero__name{
  margin:0;font-family:var(--serif);font-weight:300;
  font-size:clamp(3.1rem,10.5vw,7.6rem);
  line-height:.93;letter-spacing:.055em;text-transform:uppercase;
}
.hero__tag{
  margin:1.6rem 0 0;font-size:clamp(.72rem,1.6vw,.84rem);
  letter-spacing:.3em;text-transform:uppercase;color:var(--ink-70);
}
.hero__tag span{margin-inline:.5em}
.hero__lead{
  margin:1.6rem 0 0;max-width:34ch;color:var(--ink-70);
}
.hero__acts{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}

.btn{
  display:inline-block;text-decoration:none;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  padding:.95rem 1.9rem;background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);
  transition:background .35s var(--ease),color .35s var(--ease);
}
.btn:hover{background:transparent;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}

.hero__reel{margin:0;position:relative}
.hero__video{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  background:var(--paper-2);
}
.hero__cap{
  margin:.95rem 0 0;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-45);
}
.hero__reel::before{
  content:"";position:absolute;left:-14px;top:14px;bottom:52px;width:1.5px;
  background:var(--ink);
}

.hero__scroll{
  position:absolute;left:50%;bottom:2.2rem;translate:-50% 0;
  width:1px;height:56px;overflow:hidden;
}
.hero__scroll span{
  position:absolute;inset:0;background:var(--ink);
  animation:drop 2.6s var(--ease) infinite;
}
@keyframes drop{
  0%{transform:translateY(-100%)}
  55%,100%{transform:translateY(100%)}
}

@media (max-width:880px){
  .hero{min-height:auto;padding-top:clamp(6.5rem,20vh,9rem)}
  .hero__in{grid-template-columns:1fr;gap:2.8rem}
  .hero__reel::before{display:none}
  .hero__scroll{display:none}
}

/* ══════════════ SEÇÕES ══════════════ */
.sec{position:relative;padding-block:var(--sec-y)}
.sec--alt{background:var(--paper-2)}

.sec__head{display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.5rem)}
.sec__title{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,4.6vw,3rem);
  letter-spacing:.17em;text-transform:uppercase;line-height:1.1;
  white-space:nowrap;
}
.sec__line{flex:1;height:1.5px;background:var(--ink)}

.sec__lead{
  margin:1.9rem 0 0;max-width:52ch;color:var(--ink-70);
}

.grp{
  margin:clamp(2.8rem,6vw,4.2rem) 0 1.4rem;
  font-family:var(--serif);font-weight:400;font-size:1.15rem;
  letter-spacing:.26em;text-transform:uppercase;
  display:flex;align-items:baseline;gap:.9rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--line-soft);
}
.grp__n{
  font-family:var(--body);font-size:.66rem;letter-spacing:.2em;
  color:var(--ink-45);
}

/* ══════════════ SOBRE ══════════════ */
.sobre{
  margin-top:clamp(2.5rem,6vw,4rem);
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem,6vw,5rem);align-items:start;
}
.sobre__foto{margin:0}
.sobre__foto img{width:100%;filter:grayscale(1) contrast(1.03)}
.sobre__intro{
  margin:0 0 1.4rem;font-family:var(--serif);
  font-size:clamp(1.35rem,3.1vw,1.95rem);line-height:1.35;
  letter-spacing:.03em;
}
.sobre__txt p{margin:0 0 1.1rem;color:var(--ink-70);max-width:56ch}
.sobre__sub{
  margin:2.6rem 0 1rem;font-size:.7rem;letter-spacing:.32em;
  text-transform:uppercase;font-weight:400;color:var(--ink);
}
.servicos{list-style:none;margin:0;padding:0;display:grid;gap:0}
.servicos li{
  font-family:var(--serif);font-size:clamp(1.15rem,2.4vw,1.5rem);
  letter-spacing:.12em;text-transform:uppercase;
  padding:.85rem 0;border-top:1px solid var(--line-soft);
}
.servicos li:last-child{border-bottom:1px solid var(--line-soft)}

@media (max-width:820px){
  .sobre{grid-template-columns:1fr}
  .sobre__foto{max-width:340px}
}

/* ══════════════ VÍDEOS ══════════════ */
.vgrid{display:grid;gap:clamp(1rem,2.4vw,1.9rem)}
.vgrid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.vgrid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:start}
.vgrid--v{
  margin-top:clamp(2.5rem,6vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr));
}
/* os cinco verticais cabem em uma linha só a partir daqui */
@media (min-width:1040px){.vgrid--v{grid-template-columns:repeat(5,1fr)}}

.vcard{margin:0}
.vcard__b{
  display:block;width:100%;padding:0;position:relative;
  background:var(--paper-2);overflow:hidden;
}
.vcard__b img{
  width:100%;aspect-ratio:var(--ar,16/9);object-fit:cover;
  transition:transform .8s var(--ease),filter .5s var(--ease);
}
.vcard__b::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,14,13,0) 45%,rgba(14,14,13,.62) 100%);
  opacity:.85;transition:opacity .4s var(--ease);
}
.vcard__b:hover img,.vcard__b:focus-visible img{transform:scale(1.035)}
.vcard__b:hover::after{opacity:1}

.vcard__play{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:clamp(48px,7vw,64px);aspect-ratio:1;border-radius:50%;
  border:1.5px solid rgba(244,241,237,.9);
  display:grid;place-items:center;
  background:rgba(14,14,13,.18);backdrop-filter:blur(2px);
  transition:background .35s var(--ease),scale .35s var(--ease);
}
.vcard__play::before{
  content:"";width:0;height:0;margin-left:3px;
  border-left:13px solid var(--paper);
  border-top:8px solid transparent;border-bottom:8px solid transparent;
}
.vcard__b:hover .vcard__play{background:rgba(14,14,13,.5);scale:1.08}

.vcard__foot{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1rem 1.15rem;color:var(--paper);
}
.vcard__t{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase}
.vcard__d{
  font-family:var(--serif);font-size:.9rem;letter-spacing:.1em;
  opacity:.85;font-variant-numeric:tabular-nums;
}

/* ══════════════ GALERIA ══════════════ */
.filtros{
  display:flex;flex-wrap:wrap;gap:.55rem;
  margin:2.2rem 0 clamp(2rem,5vw,3rem);
}
.filtro{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.65rem 1.1rem;border:1px solid var(--line);
  color:var(--ink-70);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.filtro span{
  font-family:var(--serif);font-size:.8rem;margin-left:.5em;opacity:.55;
  font-variant-numeric:tabular-nums;
}
.filtro:hover{border-color:var(--ink);color:var(--ink)}
.filtro.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.galeria{columns:3;column-gap:clamp(.7rem,1.6vw,1.2rem)}
@media (max-width:900px){.galeria{columns:2}}
@media (max-width:520px){.galeria{columns:1}}

.gitem{break-inside:avoid;margin:0 0 clamp(.7rem,1.6vw,1.2rem)}
/* só esconde para animar se o JS estiver de pé — sem ele, tudo aparece */
.js .gitem{
  opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.gitem.is-in{opacity:1;transform:none}
.gitem__b{display:block;width:100%;padding:0;position:relative;background:var(--paper-2)}
.gitem__b img{width:100%;transition:transform .9s var(--ease)}
.gitem__b::after{
  content:"";position:absolute;inset:0;background:var(--ink);
  opacity:0;transition:opacity .45s var(--ease);
}
.gitem__b:hover img,.gitem__b:focus-visible img{transform:scale(1.03)}
.gitem__b:hover::after{opacity:.1}

/* ══════════════ INFORMAÇÕES ══════════════ */
.infos{
  list-style:none;margin:clamp(2.5rem,6vw,4rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:clamp(1.5rem,4vw,3rem);
}
.info{border-top:1.5px solid var(--ink);padding-top:1.4rem}
.info__n{
  display:block;font-family:var(--serif);font-size:.95rem;
  letter-spacing:.2em;color:var(--ink-45);margin-bottom:.9rem;
}
.info h3{
  margin:0 0 .5rem;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.25rem,2.6vw,1.6rem);
  letter-spacing:.16em;text-transform:uppercase;
}
.info p{margin:0;color:var(--ink-70)}

/* ══════════════ CONTATO ══════════════ */
.sec--contato{background:var(--paper);padding-bottom:clamp(3.5rem,8vw,6rem)}
.contato__lead{margin:1.9rem 0 0;max-width:48ch;color:var(--ink-70)}
.contato{
  margin-top:clamp(2.5rem,6vw,4rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:0;border-top:1px solid var(--line);
}
.cbox{
  display:grid;gap:.4rem;padding:1.8rem 1.6rem 1.8rem 0;
  text-decoration:none;border-bottom:1px solid var(--line);
  position:relative;transition:padding-left .4s var(--ease);
}
.cbox+.cbox{border-left:1px solid var(--line);padding-left:1.6rem}
.cbox:hover{padding-left:1rem}
.cbox+.cbox:hover{padding-left:2.6rem}
.cbox__k{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-45)}
.cbox__v{
  font-family:var(--serif);font-size:clamp(1.3rem,3vw,1.75rem);
  letter-spacing:.06em;
}
.cbox__go{
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-70);margin-top:.35rem;
}
.cbox__go::after{content:" →"}
@media (max-width:760px){
  .cbox+.cbox{border-left:0;padding-left:0}
  .cbox+.cbox:hover{padding-left:1rem}
}

/* ══════════════ RODAPÉ ══════════════ */
.rodape{background:var(--ink);color:var(--paper);padding-block:clamp(3rem,7vw,4.5rem)}
.rodape__in{display:grid;gap:.7rem;text-align:center}
.rodape__marca{
  margin:0;font-family:var(--serif);font-size:clamp(1.6rem,5vw,2.4rem);
  letter-spacing:.24em;text-transform:uppercase;font-weight:300;
}
.rodape__t{margin:0;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;opacity:.6}
.rodape__t span{margin-inline:.5em}
.rodape__c{margin:1.6rem 0 0;font-size:.78rem;opacity:.42}

/* ══════════════ LIGHTBOX ══════════════ */
.lb{
  border:0;padding:0;width:100vw;max-width:100vw;height:100svh;max-height:100svh;
  background:rgba(10,10,9,.97);color:var(--paper);overflow:hidden;
}
.lb::backdrop{background:rgba(10,10,9,.9)}
.lb__stage{
  position:absolute;inset:clamp(3.5rem,7vh,5rem) clamp(1rem,7vw,5rem) clamp(3.2rem,6vh,4.2rem);
  display:grid;place-items:center;
}
.lb__stage img,.lb__stage video{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
}
.lb__stage img{animation:lbIn .5s var(--ease)}
@keyframes lbIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

.lb__x{
  position:absolute;top:.5rem;right:1rem;z-index:3;
  font-size:2.6rem;line-height:1;color:var(--paper);opacity:.7;
  width:3rem;height:3rem;
}
.lb__x:hover{opacity:1}

.lb__nav{
  position:absolute;top:50%;translate:0 -50%;z-index:3;
  width:clamp(42px,6vw,58px);height:clamp(42px,6vw,58px);
  opacity:.55;transition:opacity .3s var(--ease);
}
.lb__nav:hover{opacity:1}
.lb__nav::before{
  content:"";position:absolute;top:50%;left:50%;
  width:14px;height:14px;border-top:1.5px solid var(--paper);border-right:1.5px solid var(--paper);
}
.lb__nav--prev{left:.35rem}
.lb__nav--prev::before{translate:-30% -50%;rotate:-135deg}
.lb__nav--next{right:.35rem}
.lb__nav--next::before{translate:-70% -50%;rotate:45deg}
.lb.is-video .lb__nav{display:none}

.lb__cap{
  position:absolute;left:0;right:0;bottom:1rem;margin:0;
  text-align:center;font-size:.72rem;letter-spacing:.16em;
  color:rgba(244,241,237,.6);padding-inline:1.5rem;
}

/* ══════════════ WHATSAPP FLUTUANTE ══════════════ */
.wpp{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:80;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ink);color:var(--paper);
  box-shadow:0 6px 22px rgba(14,14,13,.22);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s,background .3s;
}
.wpp.is-on{opacity:1;visibility:visible;transform:none}
.wpp:hover{background:#25612e}

/* ══════════════ REVEAL ══════════════ */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal,.gitem{opacity:1!important;transform:none!important;transition:none}
  .hero__scroll span{animation:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

@media print{
  .nav,.wpp,.hero__scroll,.lb,.filtros{display:none!important}
  body{background:#fff}
  .galeria{columns:2}
}