/* ==========================================================================
   COPN.lab — one page
   Paleta: preto #0D0D0D · creme #FCEFC8 · azul #001B72 · cinza #4B585A
   Tipografia: títulos = grotesca condensada (stand-in de PP Right Grotesk Compact)
               corpo/UI = mono (stand-in de PP Supply Mono)
               logo = PP Watch
   ========================================================================== */

@font-face{
  font-family:"PP Watch";
  src:url("../fonts/PPWatch-Bold.otf") format("opentype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PP Watch";
  src:url("../fonts/PPWatch-Extralight.otf") format("opentype");
  font-weight:200; font-style:normal; font-display:swap;
}

:root{
  --black:#0D0D0D;
  --cream:#FCEFC8;
  --blue:#001B72;
  --blue-lift:#0a2a9c;
  --gray:#4B585A;

  --logo:"PP Watch","Archivo",sans-serif;
  --display:"Right Grotesk Compact","Archivo","Archivo Narrow",sans-serif;
  --mono:"Supply Mono","JetBrains Mono","IBM Plex Mono",monospace;

  /* tema padrão: preto */
  --bg:var(--black);
  --fg:var(--cream);
  --fg-2:rgba(252,239,200,0.66);
  --fg-3:rgba(252,239,200,0.40);
  --hair:rgba(252,239,200,0.16);
  --hair-soft:rgba(252,239,200,0.09);
  --accent:var(--cream);

  --ease:cubic-bezier(0.22,1,0.36,1);
  --pad:clamp(20px,4vw,64px);
  --nav-h:72px;
}

/* seções creme */
.section--cream{
  --bg:var(--cream);
  --fg:var(--black);
  --fg-2:rgba(13,13,13,0.70);
  --fg-3:rgba(13,13,13,0.45);
  --hair:rgba(13,13,13,0.16);
  --hair-soft:rgba(13,13,13,0.09);
  --accent:var(--blue);
  background:var(--cream);color:var(--black);
}
/* seção azul */
.section--blue{
  --bg:var(--blue);
  --fg:var(--cream);
  --fg-2:rgba(252,239,200,0.74);
  --fg-3:rgba(252,239,200,0.52);
  --hair:rgba(252,239,200,0.22);
  --hair-soft:rgba(252,239,200,0.12);
  --accent:var(--cream);
  background:var(--blue);color:var(--cream);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);}
body{
  background:var(--black);color:var(--cream);
  font-family:var(--mono);font-size:14px;font-weight:300;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--cream);color:var(--black);}

.mono{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:0.18em;text-transform:uppercase;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--cream);color:var(--black);padding:10px 16px;}

.grain{
  position:fixed;inset:-50%;z-index:150;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 700ms steps(2) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0);} 25%{transform:translate(-2%,1%);}
  50%{transform:translate(1%,-2%);} 75%{transform:translate(-1%,-1%);}
  100%{transform:translate(2%,1%);}
}

section{position:relative;padding:clamp(76px,9vw,140px) var(--pad);}
.footer{padding:clamp(56px,7vw,92px) var(--pad) 26px;}

h1,h2,h3{
  font-family:var(--display);font-weight:800;font-stretch:72%;
  line-height:.92;letter-spacing:-0.01em;text-transform:uppercase;
}
.big{font-size:clamp(28px,4.4vw,62px);}
.big em{font-style:normal;font-weight:inherit;font-stretch:inherit;color:inherit;}

.col-label{color:var(--fg-3);}
.head-row{margin-bottom:clamp(40px,6vw,76px);}

/* ---------- Botões / links ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:0.18em;text-transform:uppercase;
  padding:16px 28px;border:1px solid transparent;cursor:pointer;
  transition:background 240ms var(--ease),color 240ms var(--ease),border-color 240ms var(--ease);
}
.btn-primary{background:var(--fg);color:var(--bg);}
.btn-primary:hover{background:transparent;color:var(--fg);border-color:var(--fg);}
.btn-lg{padding:20px 40px;font-size:12px;}

.link-arrow{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid var(--hair);padding-bottom:7px;
  transition:gap 240ms var(--ease),border-color 240ms var(--ease);
}
.link-arrow::after{content:"→";}
.link-arrow:hover{gap:18px;border-color:var(--accent);}

/* ---------- Header ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);background:transparent;color:var(--cream);
  transition:background 300ms var(--ease);
}
.nav.is-solid{background:rgba(13,13,13,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--cream);}
.wordmark{
  font-family:var(--display);font-size:23px;line-height:1;white-space:nowrap;
  display:inline-flex;align-items:baseline;
}
.wm-copn{font-weight:900;font-stretch:70%;letter-spacing:-0.02em;text-transform:uppercase;}
.wm-lab{
  font-family:var(--mono);font-weight:400;font-size:.40em;
  letter-spacing:0.22em;text-transform:lowercase;
  margin-left:.16em;opacity:.78;
}
.nav-right{display:flex;align-items:center;gap:22px;}
.nav-status{color:rgba(252,239,200,.5);}
.nav-status::before{content:"●";margin-right:8px;animation:blink 2.4s steps(2) infinite;}
@keyframes blink{50%{opacity:.15;}}
@media(max-width:620px){ .nav-status{display:none;} }
.burger{background:none;border:0;width:38px;height:38px;display:flex;flex-direction:column;justify-content:center;gap:7px;cursor:pointer;}
.burger span{display:block;height:1.5px;background:var(--cream);transition:transform 260ms var(--ease);}
.is-menu .burger span:first-child{transform:translateY(4.25px) rotate(45deg);}
.is-menu .burger span:last-child{transform:translateY(-4.25px) rotate(-45deg);}

/* ---------- Menu ---------- */
.menu{
  position:fixed;inset:0;z-index:110;background:var(--black);
  display:flex;align-items:center;padding:calc(var(--nav-h) + 20px) var(--pad) 32px;
  overflow-y:auto;
}
.menu[hidden]{display:none;}
.menu-inner{width:100%;max-width:820px;margin:0 auto;}
.menu-list{display:flex;flex-direction:column;border-top:1px solid var(--hair-soft);}
.menu-list a{
  font-family:var(--display);font-weight:800;font-stretch:72%;text-transform:uppercase;
  font-size:clamp(20px,3.4vw,36px);line-height:1.25;letter-spacing:-0.01em;
  padding:clamp(8px,1.1vw,14px) 0;border-bottom:1px solid var(--hair-soft);
  display:flex;align-items:baseline;gap:18px;
  transition:color 200ms var(--ease),padding-left 300ms var(--ease);
}
.menu-list a .mono{color:var(--fg-3);font-size:10px;}
.menu-list a:hover{padding-left:14px;color:var(--cream);}
.menu-foot{display:flex;justify-content:space-between;gap:16px;color:var(--fg-3);margin-top:28px;}

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;padding:var(--nav-h) var(--pad) 72px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  position:relative;overflow:hidden;
}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(2px) saturate(1.05);transform:scale(1.04);}
.scanlines{
  position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.42) 0 1px,transparent 1px 3px);
}
.hero-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(74% 64% at 50% 44%,rgba(13,13,13,.22) 0%,rgba(13,13,13,.66) 62%,rgba(13,13,13,.97) 100%),
    linear-gradient(to bottom,rgba(13,13,13,.62),rgba(13,13,13,.26) 40%,rgba(13,13,13,.94));
}

.hero-content{position:relative;z-index:2;max-width:min(720px,92vw);}

.hero-logo{
  font-family:var(--display);font-size:clamp(46px,10vw,132px);line-height:.88;
  margin-bottom:22px;white-space:nowrap;display:flex;align-items:baseline;justify-content:center;
}
.hero-logo .wm-lab{font-size:.26em;letter-spacing:0.3em;margin-left:.22em;opacity:.8;}
.hero-slogan{display:inline-block;color:rgba(252,239,200,.7);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:8px 0;margin-bottom:20px;font-size:10px;}
.hero-text{font-size:13px;color:rgba(252,239,200,.66);max-width:430px;margin:0 auto;}
.hero-scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;color:rgba(252,239,200,.45);}
.hero-corners i{position:absolute;width:24px;height:24px;border:1px solid var(--hair);}
.hero-corners i:nth-child(1){top:calc(var(--nav-h) + 6px);left:var(--pad);border-right:0;border-bottom:0;}
.hero-corners i:nth-child(2){top:calc(var(--nav-h) + 6px);right:var(--pad);border-left:0;border-bottom:0;}
.hero-corners i:nth-child(3){bottom:22px;left:var(--pad);border-right:0;border-top:0;}
.hero-corners i:nth-child(4){bottom:22px;right:var(--pad);border-left:0;border-top:0;}

/* ---------- Faixa de clientes ---------- */
.clientes{padding:clamp(26px,3.4vw,44px) 0;background:var(--blue);}
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{display:flex;align-items:center;gap:clamp(42px,6vw,92px);width:max-content;animation:scrollx 46s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes scrollx{to{transform:translateX(-50%);}}
.clogo{
  white-space:nowrap;color:var(--cream);opacity:.62;line-height:1;
  font-size:clamp(16px,1.9vw,23px);transition:opacity 300ms var(--ease);
}
.marquee:hover .clogo{opacity:.38;}
.marquee .clogo:hover{opacity:1;}
.clogo-1{font-family:var(--display);font-weight:800;font-stretch:70%;letter-spacing:0.3em;}
.clogo-2{font-family:var(--display);font-weight:500;font-stretch:110%;font-size:clamp(19px,2.2vw,27px);}
.clogo-3{font-family:var(--display);font-weight:800;font-stretch:80%;letter-spacing:0.05em;}
.clogo-3 i{font-style:normal;vertical-align:super;font-size:.5em;margin-left:.1em;}
.clogo-4{font-family:var(--mono);font-size:clamp(12px,1.3vw,15px);letter-spacing:0.24em;text-transform:uppercase;}
.clogo-5{font-family:var(--display);font-weight:600;font-stretch:66%;letter-spacing:0.14em;}
.clogo-6{font-family:var(--display);font-weight:400;font-stretch:120%;font-size:clamp(19px,2.2vw,27px);}
.clogo-7{font-family:var(--mono);font-weight:500;letter-spacing:0.3em;font-size:clamp(13px,1.4vw,16px);}
.clogo-8{font-family:var(--display);font-weight:500;font-stretch:90%;font-size:clamp(18px,2.1vw,25px);}

/* ---------- Placeholders (clima de filme) ---------- */
.ph{position:relative;width:100%;overflow:hidden;background:#111;}
.ph::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 20% 10%,rgba(252,239,200,.10),transparent 60%),
    radial-gradient(90% 80% at 85% 85%,rgba(0,27,114,.60),transparent 62%),
    repeating-linear-gradient(to bottom,rgba(0,0,0,.20) 0 2px,transparent 2px 4px),
    linear-gradient(200deg,#1b1b1b,#0d0d0d 70%);
}
.ph::after{
  content:"";position:absolute;inset:0;opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.slate{
  position:absolute;left:14px;bottom:12px;z-index:3;color:rgba(252,239,200,.72);
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  padding:5px 9px;background:rgba(13,13,13,.5);backdrop-filter:blur(4px);
}
.slate b{color:var(--cream);font-weight:500;}
.film-16x9{aspect-ratio:16/9;}
.film{position:relative;width:100%;overflow:hidden;background:#111;}
.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.film-21x9{aspect-ratio:21/9;}
.film-3x2{aspect-ratio:3/2;}
.film-4x3{aspect-ratio:4/3;}
.film-portrait{aspect-ratio:3/4;}
@media(max-width:720px){ .film-21x9{aspect-ratio:16/10;} }

.play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:88px;height:88px;border-radius:50%;cursor:pointer;background:transparent;border:1px solid var(--cream);
  transition:background 260ms var(--ease),transform 260ms var(--ease);
}
.play::after{content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);border-left:15px solid var(--cream);border-top:9px solid transparent;border-bottom:9px solid transparent;transition:border-left-color 260ms var(--ease);}
.play:hover{background:var(--cream);transform:translate(-50%,-50%) scale(1.04);}
.play:hover::after{border-left-color:var(--black);}

/* ---------- Conceito ---------- */
.grid-12{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.92fr);
  gap:clamp(20px,4vw,60px);align-items:start;margin-bottom:clamp(44px,6vw,88px);
}
.col-side p{color:var(--fg-2);margin-bottom:14px;max-width:420px;}
@media(max-width:1000px){ .grid-12{grid-template-columns:1fr;gap:24px;} }
.bleed{margin:0 calc(var(--pad) * -1);}
/* dobra que termina em mídia sangrada não leva respiro embaixo */
.conceito{padding-bottom:0;}

/* ---------- Galeria ---------- */
.carousel{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--pad) * -1);padding:0 var(--pad);cursor:grab;}
.carousel::-webkit-scrollbar{display:none;}
.carousel.is-drag{cursor:grabbing;}
.carousel-track{display:flex;gap:14px;width:max-content;}
.slide{width:min(56vw,680px);scroll-snap-align:start;}
.slide figcaption{color:var(--fg-3);margin-top:10px;}
.carousel-nav{display:flex;align-items:center;justify-content:space-between;margin-top:24px;}
.drag-hint{color:var(--fg-3);}
.cbtns{display:flex;gap:10px;}
.cbtn{
  width:54px;height:54px;background:transparent;border:1px solid var(--hair);
  color:var(--fg);font-size:15px;cursor:pointer;font-family:var(--mono);
  transition:background 220ms var(--ease),color 220ms var(--ease),border-color 220ms var(--ease);
}
.cbtn:hover{background:var(--accent);color:var(--bg);border-color:var(--accent);}
@media(max-width:720px){ .slide{width:82vw;} }

/* ---------- O que criamos: palco com destaque ---------- */
.stage{overflow:hidden;margin:0 calc(var(--pad) * -1);}
.stage-track{
  display:flex;align-items:flex-start;gap:clamp(14px,2vw,26px);
  padding-left:calc(50% - min(30vw,430px));
  transition:transform 700ms var(--ease);
}
.sol{
  flex:0 0 min(60vw,860px);
  opacity:.3;filter:saturate(.5);transform:scale(.93);transform-origin:center bottom;
  transition:opacity 600ms var(--ease),transform 600ms var(--ease),filter 600ms var(--ease);
}
.sol.is-active{opacity:1;filter:none;transform:scale(1);}

.sol-body{display:grid;grid-template-columns:70px 1fr;gap:clamp(12px,2vw,28px);align-items:baseline;padding-top:20px;}
.sol-num{color:var(--fg-3);}
.sol h3{font-size:clamp(19px,2.4vw,32px);}
.sol p{grid-column:2;color:var(--fg-2);max-width:520px;margin-top:6px;}
.stage-nav{display:flex;align-items:center;justify-content:space-between;margin-top:clamp(24px,3vw,38px);}
.dots{display:flex;gap:8px;}
.dots button{
  width:26px;height:2px;border:0;padding:0;cursor:pointer;
  background:var(--hair);transition:background 260ms var(--ease),width 260ms var(--ease);
}
.dots button.is-on{background:var(--accent);width:46px;}
@media(max-width:860px){
  .stage{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
  .stage::-webkit-scrollbar{display:none;}
  .stage-track{padding:0 var(--pad);transform:none !important;}
  .sol{flex:0 0 84vw;opacity:.55;transform:none;scroll-snap-align:center;}
  .sol.is-active{opacity:1;transform:none;}
}

/* ---------- Processo animado ---------- */
.track-wrap{position:relative;padding-left:clamp(30px,5vw,72px);}
.track-line{position:absolute;left:clamp(2px,1.4vw,14px);top:8px;bottom:8px;width:1px;background:var(--hair-soft);}
.track-fill{display:block;width:100%;height:0;background:var(--cream);transition:height 600ms var(--ease);}
.steps{list-style:none;}
.step{
  position:relative;display:grid;grid-template-columns:70px minmax(0,1fr) clamp(120px,18vw,240px);
  gap:clamp(14px,3vw,44px);align-items:center;
  padding:clamp(22px,3vw,38px) 0;
}

.step .dot{
  position:absolute;left:calc(-1 * clamp(30px,5vw,72px) + clamp(-2px,1.4vw,10px));top:50%;
  width:9px;height:9px;border-radius:50%;background:var(--black);border:1px solid var(--hair);
  transform:translateY(-50%) scale(.6);transition:transform 500ms var(--ease),background 500ms var(--ease);
}
.step.is-on .dot{background:var(--cream);border-color:var(--cream);transform:translateY(-50%) scale(1);}
.step .num{color:var(--fg-3);font-size:12px;}
.step h3{font-size:clamp(17px,1.9vw,24px);margin-bottom:8px;}
.step p{color:var(--fg-2);max-width:560px;}

/* mini-animações por etapa */
.viz{height:66px;position:relative;display:flex;align-items:center;gap:6px;justify-content:flex-end;}
.viz i{display:block;background:var(--cream);}
.viz-brief{gap:8px;flex-direction:column;align-items:flex-end;justify-content:center;}
.viz-brief i{height:2px;width:0;opacity:.75;}
.viz-brief i:nth-child(2){opacity:.45;}
.viz-brief i:nth-child(3){opacity:.25;}
.step.is-on .viz-brief i:nth-child(1){animation:drawline 700ms var(--ease) 120ms forwards;}
.step.is-on .viz-brief i:nth-child(2){animation:drawline 700ms var(--ease) 260ms forwards;}
.step.is-on .viz-brief i:nth-child(3){animation:drawline 700ms var(--ease) 400ms forwards;}
@keyframes drawline{to{width:100%;}}

.viz-type .typed{
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;color:var(--fg-2);
  white-space:nowrap;overflow:hidden;width:0;display:inline-block;
}
.step.is-on .viz-type .typed{animation:typing 1.8s steps(24) 200ms forwards;}
@keyframes typing{to{width:100%;}}
.viz-type .caret{width:7px;height:14px;background:var(--cream);margin-left:4px;animation:blink 1s steps(2) infinite;}

.viz-art i{width:26px;height:26px;border-radius:50%;opacity:0;transform:translateY(8px);}
.viz-art i:nth-child(1){background:var(--cream);}
.viz-art i:nth-child(2){background:var(--blue-lift);}
.viz-art i:nth-child(3){background:var(--gray);}
.viz-art i:nth-child(4){background:#e2603c;}
.step.is-on .viz-art i{animation:pop 520ms var(--ease) forwards;}
.step.is-on .viz-art i:nth-child(2){animation-delay:110ms;}
.step.is-on .viz-art i:nth-child(3){animation-delay:220ms;}
.step.is-on .viz-art i:nth-child(4){animation-delay:330ms;}
@keyframes pop{to{opacity:1;transform:translateY(0);}}

.viz-wave{gap:4px;align-items:center;}
.viz-wave i{width:3px;height:12%;opacity:.8;}
.step.is-on .viz-wave i{animation:wave 1.1s ease-in-out infinite alternate;}
.viz-wave i:nth-child(2n){animation-delay:.12s;}
.viz-wave i:nth-child(3n){animation-delay:.24s;}
.viz-wave i:nth-child(5n){animation-delay:.36s;}
@keyframes wave{from{height:12%;}to{height:88%;}}

.viz-check svg{width:54px;height:54px;fill:none;stroke:var(--cream);stroke-width:3;stroke-linecap:square;}
.viz-check path{stroke-dasharray:70;stroke-dashoffset:70;}
.step.is-on .viz-check path{animation:draw 700ms var(--ease) 200ms forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}

@media(max-width:900px){
  .step{grid-template-columns:54px 1fr;}
  .step p{grid-column:2;}
  .viz{display:none;}
}

/* ---------- Cases ---------- */
.case-list{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px);}
.case:first-child{grid-column:1 / -1;}

.case-meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 2px 0;}
.case-meta h3{font-size:clamp(15px,1.7vw,20px);}
.case-meta .mono{color:var(--fg-3);}
@media(max-width:760px){ .case-list{grid-template-columns:1fr;} }
.cases-foot{display:flex;justify-content:flex-end;margin-top:clamp(28px,3.4vw,48px);}
.cases-foot .link-arrow{margin-top:0;}

/* ---------- Time ---------- */
.time-lede{color:var(--fg-2);max-width:620px;margin:-16px 0 clamp(30px,4vw,52px);}
.member{
  flex:0 0 min(44vw,540px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(16px,2.4vw,32px);align-items:center;
  opacity:.3;filter:saturate(.5);transform:scale(.94);transform-origin:center;
  transition:opacity 600ms var(--ease),transform 600ms var(--ease),filter 600ms var(--ease);
}
.member.is-active{opacity:1;filter:none;transform:scale(1);}
.portrait{aspect-ratio:3/4;overflow:hidden;background:#111;}
.portrait img{width:100%;height:100%;object-fit:cover;}
.member h3{font-size:clamp(18px,2.2vw,28px);margin-bottom:8px;}
.member-role{display:block;color:var(--fg-3);margin-bottom:14px;}
.member p{color:var(--fg-2);}
.member .link-arrow{margin-top:18px;}
@media(max-width:860px){
  .member{flex:0 0 84vw;grid-template-columns:1fr;opacity:.55;transform:none;}
  .member.is-active{opacity:1;transform:none;}
}

/* ---------- Contato (azul) ---------- */
.giant{
  display:block;font-family:var(--display);font-weight:800;font-stretch:72%;text-transform:uppercase;
  font-size:clamp(44px,10vw,140px);line-height:.88;letter-spacing:-0.015em;margin:0 0 34px;
  transition:opacity 300ms var(--ease);
}
.giant span{display:block;}
.giant em{font-style:normal;font-weight:inherit;color:inherit;}
.giant:hover{opacity:.78;}
.contato-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.contato-foot p{color:var(--fg-2);max-width:420px;}

/* ---------- Footer ---------- */
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(20px,3vw,40px);padding-bottom:40px;}
.footer-wm{font-size:28px;margin-bottom:10px;}
.footer-slogan{color:var(--fg-3);}
.footer-col{display:flex;flex-direction:column;gap:9px;color:var(--fg-2);}
.footer-h{color:var(--fg-3);margin-bottom:6px;}
.footer-col a:hover{color:var(--cream);}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--fg-3);border-top:1px solid var(--hair-soft);padding-top:20px;}
@media(max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:520px){ .footer-grid{grid-template-columns:1fr;} }

/* ---------- WhatsApp fixo ---------- */
.wa{
  position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:130;
  width:54px;height:54px;display:flex;align-items:center;justify-content:center;
  background:var(--cream);color:var(--black);border:1px solid var(--cream);
  transition:background 240ms var(--ease),color 240ms var(--ease);
}
.wa svg{width:26px;height:26px;fill:currentColor;}
.wa:hover{background:var(--blue);color:var(--cream);border-color:var(--blue);}
.is-menu .wa{opacity:0;pointer-events:none;}
@media(max-width:720px){ .wa{right:12px;width:48px;height:48px;} }

/* ---------- Reveal ---------- */

@media(prefers-reduced-motion:reduce){
  .step{opacity:1;transform:none;}
  .grain,.marquee-track,
  .nav-status::before,.viz *{animation:none !important;}
  html{scroll-behavior:auto;}
}