/* ============================================================
   Ascensão Criativa — folha de estilo
   Efeitos reimplementados: reveal por interseção, split de linhas,
   cortina de imagem, glow card, parallax de texto, sticky sequencial.
   ============================================================ */

:root{
  --ink:        #0B0705;
  --ink-2:      #130D08;
  --ink-3:      #1D140D;
  --cream:      #FFF4EC;
  --cream-dim:  #C9BBB0;
  --sand:       #F7EFE7;
  --sand-2:     #EFE3D8;

  --orange:     #FF6A00;
  --orange-2:   #FF8A2B;
  --orange-3:   #FFB35C;
  --orange-deep:#C74A00;

  --rgb-orange: 255,106,0;

  --wrap:       1240px;
  --pad:        clamp(20px, 5vw, 64px);

  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-text:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);

  --header-h: 78px;
}

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

html{ scroll-behavior:auto; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-text);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--orange); color:#fff; }

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

/* ---------- tipografia ---------- */
.display{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.03em;
  margin:0;
  text-wrap:balance;
}
/* menor que um título de largura cheia: aqui ele divide a linha com a coluna
   de apoio, então precisa caber em ~metade do container */
h1.display, .hero-title{ font-size:clamp(2.5rem, 5vw, 4.8rem); }
h2.display{ font-size:clamp(2rem, 5.2vw, 4.4rem); }
h2.display.bigger{ font-size:clamp(2.6rem, 8vw, 7rem); }
h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; margin:0; }

.tag{
  display:inline-block;
  font-family:var(--font-display);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange-2);
  margin-bottom:1.4rem;
}
.eyebrow{
  font-family:var(--font-display);
  font-size:.8rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--orange-3);
  margin:0 0 1.6rem;
}

/* atenção: `ch` aqui seguiria o font-size do container (texto corrido),
   estrangulando o h2. A largura fica no próprio h2, onde `ch` é do display. */
.sec-head{ margin-bottom:clamp(2.25rem,5vw,4.5rem); }
.sec-head h2{ max-width:15ch; }
.sec-head--split{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:3rem; max-width:none;
}
.sec-head--split h2{ max-width:16ch; }
.sec-head-note{ max-width:32ch; color:var(--cream-dim); margin:0; flex-shrink:0; }
.sub-head{ font-size:clamp(1.3rem,2.4vw,2rem); margin:0 0 2rem; }

/* ---------- botões ---------- */
.btn{
  --btn-bg:var(--orange);
  --btn-fg:#160A00;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:1.05em 1.9em;
  border-radius:999px;
  font-family:var(--font-display);
  font-size:.95rem; font-weight:600; letter-spacing:-.01em;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid transparent;
  transition:transform .4s var(--ease-out), background-color .3s ease, color .3s ease, border-color .3s ease;
  will-change:transform;
}
.btn:hover{ transform:translateY(-3px); }
.btn--solid{ --btn-bg:var(--orange); --btn-fg:#160A00; }
.btn--solid:hover{ --btn-bg:var(--orange-2); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--cream); border-color:rgba(255,244,236,.28); }
.btn--ghost:hover{ --btn-bg:rgba(255,244,236,.08); border-color:rgba(255,244,236,.5); }
.btn--dark{ --btn-bg:var(--ink); --btn-fg:var(--cream); }
.btn--dark:hover{ --btn-bg:var(--ink-3); }
.btn--outline-dark{ --btn-bg:transparent; --btn-fg:#2A1403; border-color:rgba(22,10,0,.35); }
.btn--outline-dark:hover{ --btn-bg:rgba(22,10,0,.07); }
.btn--sm{ padding:.78em 1.35em; font-size:.85rem; }

/* ============================================================
   PLACEHOLDERS
   ============================================================ */
.ph{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:
    repeating-linear-gradient(135deg, rgba(var(--rgb-orange),.10) 0 12px, rgba(var(--rgb-orange),.03) 12px 24px),
    var(--ink-2);
  border:1px dashed rgba(var(--rgb-orange),.45);
  display:grid; place-items:center;
  isolation:isolate;
}
.ph::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 0%, rgba(var(--rgb-orange),.14), transparent 65%);
  pointer-events:none;
}
.ph-label{
  position:relative; z-index:2;
  display:flex; flex-direction:column; gap:.45em;
  padding:1.2em;
  text-align:center;
  font-family:var(--font-display);
  font-size:.86rem; font-weight:600; letter-spacing:-.01em;
  color:var(--orange-3);
  line-height:1.25;
}
.ph-label em{
  font-style:normal; font-weight:400;
  font-size:.72rem; letter-spacing:.06em;
  color:rgba(255,244,236,.5);
  font-family:var(--font-text);
}
.ph--fill{ position:absolute; inset:0; width:100%; height:100%; border-radius:0; }
.ph--16x9,.media--16x9{ aspect-ratio:16/9; }
.ph--4x3,.media--4x3{ aspect-ratio:4/3; }
.ph--3x4,.media--3x4{ aspect-ratio:3/4; }
.ph--4x5,.media--4x5{ aspect-ratio:4/5; }
.ph--16x10,.media--16x10{ aspect-ratio:16/10; }
.ph--9x16,.media--9x16{ aspect-ratio:9/16; }
.ph--1x1,.media--1x1{ aspect-ratio:1/1; }

/* mídia real, no lugar do placeholder */
.media{
  position:relative; overflow:hidden;
  border-radius:14px;
  background:var(--ink-2);
}
.media img, .media video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.ph--video .ph-label::before{
  content:'▶';
  font-size:1.6rem; color:var(--orange);
  margin-bottom:.15em;
}
/* placeholder dentro de seção clara */
.branding .ph, .equipe .ph{
  background:
    repeating-linear-gradient(135deg, rgba(var(--rgb-orange),.14) 0 12px, rgba(var(--rgb-orange),.05) 12px 24px),
    var(--sand-2);
  border-color:rgba(var(--rgb-orange),.5);
}
.branding .ph-label, .equipe .ph-label{ color:var(--orange-deep); }
.branding .ph-label em, .equipe .ph-label em{ color:rgba(43,20,3,.55); }

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink);
  display:grid; place-items:center;
  color:var(--orange);
}
.preloader-mark{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.preloader-mark svg{ animation:markPulse 1.5s var(--ease-inout) infinite; }
.preloader-bar{ display:block; width:120px; height:2px; background:rgba(var(--rgb-orange),.2); overflow:hidden; }
.preloader-bar i{ display:block; width:40%; height:100%; background:var(--orange); animation:barSlide 1.1s var(--ease-inout) infinite; }
@keyframes markPulse{ 0%,100%{ transform:translateY(0); opacity:1 } 50%{ transform:translateY(-8px); opacity:.65 } }
@keyframes barSlide{ 0%{ transform:translateX(-110%) } 100%{ transform:translateX(320%) } }
.anime-start #preloader{ animation:fadeOutPreloader .8s var(--ease-out) forwards; }
@keyframes fadeOutPreloader{ to{ opacity:0; visibility:hidden; } }
.no-js #preloader{ display:none; }

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:transform .5s var(--ease-out), background-color .45s ease, backdrop-filter .45s ease, color .45s ease;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.header-is-visible{
  background:rgba(11,7,5,.72);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,244,236,.08);
}
.header--light{ color:var(--cream); }
.header--dark{ color:#1A0E04; }
.header--dark.header-is-visible{
  background:rgba(247,239,231,.82);
  border-bottom-color:rgba(26,14,4,.1);
}
.header-is-hidden{ transform:translateY(-110%); }

.brand{ display:inline-flex; align-items:center; gap:.6rem; }
.brand-mark{ color:var(--orange); flex:none; }
.brand-text{
  font-family:var(--font-display); font-weight:700;
  font-size:1.02rem; letter-spacing:-.02em; line-height:1;
  display:flex; flex-direction:column;
}
.brand-text em{ font-style:normal; font-weight:500; font-size:.78em; color:var(--orange-2); letter-spacing:.04em; }

.header-actions{ display:flex; align-items:center; gap:1rem; }

.menu-open{ display:inline-flex; align-items:center; gap:.6rem; padding:.5rem; }
.menu-open-bars{ display:block; width:26px; }
.menu-open-bars i{
  display:block; height:2px; background:currentColor; border-radius:2px;
  transition:transform .45s var(--ease-out), width .45s var(--ease-out);
}
.menu-open-bars i:first-child{ width:26px; margin-bottom:6px; }
.menu-open-bars i:last-child{ width:17px; }
.menu-open:hover .menu-open-bars i:last-child{ width:26px; }
.menu-open-label{ font-family:var(--font-display); font-size:.86rem; font-weight:600; }
.nav-is-open .menu-open-bars i:first-child{ transform:translateY(4px) rotate(45deg); }
.nav-is-open .menu-open-bars i:last-child{ width:26px; transform:translateY(-4px) rotate(-45deg); }

/* ============================================================
   NAV FULLSCREEN
   ============================================================ */
.nav{
  position:fixed; inset:0; z-index:890;
  background:var(--ink-2);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease-out);
  overflow-y:auto;
}
.nav.active{ clip-path:inset(0 0 0 0); }
.menu{
  min-height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--header-h) + 4vh) var(--pad) 6vh;
  max-width:var(--wrap); margin-inline:auto; width:100%;
}
.menu-list{ display:flex; flex-direction:column; gap:.2rem; }
.menu-list > li{ overflow:hidden; }
.nav-link.title{
  display:block;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2rem,6.5vw,4.6rem);
  letter-spacing:-.035em; line-height:1.08;
  color:var(--cream);
  transform:translateY(105%);
  transition:transform .8s var(--ease-out), color .3s ease;
}
.nav.active .nav-link.title{ transform:translateY(0); }
.menu-list > li:nth-child(1) .nav-link.title{ transition-delay:.08s }
.menu-list > li:nth-child(2) .nav-link.title{ transition-delay:.14s }
.menu-list > li:nth-child(3) .nav-link.title{ transition-delay:.20s }
.menu-list > li:nth-child(4) .nav-link.title{ transition-delay:.26s }
.menu-list > li:nth-child(5) .nav-link.title{ transition-delay:.32s }
.nav-link.title:hover{ color:var(--orange); }

.has-submenu .submenu{
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .6s var(--ease-out), opacity .4s ease, margin .6s var(--ease-out);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.2rem 2rem;
}
.has-submenu.active .submenu{ max-height:400px; opacity:1; margin:1rem 0 1.5rem; }
.submenu .nav-link{
  display:block; padding:.35rem 0;
  color:var(--cream-dim); font-size:1rem;
  transition:color .3s ease, padding-left .3s ease;
}
.submenu .nav-link:hover{ color:var(--orange); padding-left:.5rem; }
.menu-foot{
  display:flex; flex-wrap:wrap; gap:1.5rem;
  margin-top:clamp(2rem,6vh,4rem);
  padding-top:1.6rem;
  border-top:1px solid rgba(255,244,236,.12);
  font-family:var(--font-display); font-size:.95rem;
  color:var(--cream-dim);
}
.menu-foot a:hover{ color:var(--orange); }

/* ============================================================
   FLOAT CTA
   ============================================================ */
.float-cta{
  position:fixed; right:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,32px);
  z-index:880;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.3rem;
  border-radius:999px;
  background:var(--orange); color:#160A00;
  font-family:var(--font-display); font-weight:600; font-size:.9rem;
  box-shadow:0 14px 40px rgba(var(--rgb-orange),.32);
  opacity:0; transform:translateY(24px) scale(.94); pointer-events:none;
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), background-color .3s ease, color .3s ease;
}
.float-cta-is-visible{ opacity:1; transform:none; pointer-events:auto; }
.float-cta:hover{ background:var(--orange-2); }
.float-cta--light{ background:var(--orange); color:#160A00; }
.float-cta--dark{ background:var(--ink); color:var(--orange); box-shadow:0 14px 40px rgba(0,0,0,.4); }

/* ============================================================
   REVEALS
   ============================================================ */
.anime{ opacity:0; }
.anime.fadeInUp{
  transform:translateY(34px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.anime.fadeInUp.delay{ transition-delay:.15s; }
.anime.come-in{ opacity:1; transform:none; }

/* split de linhas */
.hero-title, .lines{ position:relative; }
.js .hero-title, .js .lines{ opacity:0; transition:opacity .2s ease; }
.js .hero-title.is-ready, .js .lines.is-split{ opacity:1; }
.hero-title .line, .lines .line{ overflow:hidden; display:block; }
.hero-title .line span, .lines .line span{
  display:inline-block;
  transform:translateY(112%);
  opacity:0;
  transition:transform .95s var(--ease-out), opacity .8s ease;
}
.hero-title.is-visible .line span,
.lines.is-visible .line span{ transform:translateY(0); opacity:1; }
.hero-title.animation-finished .line,
.hero-title.animation-finished .line span,
.lines.animation-finished .line,
.lines.animation-finished .line span{ overflow:visible; }

/* cortina de imagem */
.image-reveal{ position:relative; overflow:hidden; }
.image-reveal::before{
  content:''; position:absolute; inset:-1px; z-index:6;
  background:var(--orange);
  transform:translateX(0);
  transition:transform 1.05s var(--ease-inout);
}
.image-reveal.come-in::before{ transform:translateX(102%); }
.image-reveal .ph-label,
.image-reveal img,
.image-reveal video,
.image-reveal .video-play{
  transform:scale(1.14); filter:blur(6px); opacity:0;
  transition:transform 1.3s var(--ease-out), filter 1.1s ease, opacity .9s ease;
  transition-delay:.18s;
}
.image-reveal.come-in .ph-label,
.image-reveal.come-in img,
.image-reveal.come-in video,
.image-reveal.come-in .video-play{ transform:none; filter:blur(0); opacity:1; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--header-h) + 8vh) 0 14vh;
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#000; }
.hero-bg .ph{ border-radius:0; border:0; }
.parallax-video{ will-change:transform; transform-origin:center; }

/* O material é vertical (9:16). No celular ele preenche no formato nativo;
   no desktop o recorte mostra a faixa central, deslocada para cima para
   privilegiar rostos em vez do meio geométrico do quadro. */
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 40%;
  filter:saturate(.88) contrast(1.06);
  opacity:0;
  transition:opacity 1.8s var(--ease-out) .3s;
}
.anime-start .hero-video{ opacity:1; }
.no-js .hero-video{ opacity:1; }

.hero-veil{
  position:absolute; inset:0;
  background:
    /* lavagem laranja da marca */
    radial-gradient(90% 70% at 12% 18%, rgba(var(--rgb-orange),.26), transparent 58%),
    /* escurece o lado do texto e deixa a imagem respirar à direita */
    linear-gradient(100deg, rgba(11,7,5,.93) 0%, rgba(11,7,5,.62) 44%, rgba(11,7,5,.18) 80%),
    /* vinheta */
    radial-gradient(130% 90% at 50% 42%, transparent 22%, rgba(11,7,5,.6) 100%),
    /* emenda com a seção seguinte */
    linear-gradient(180deg, rgba(11,7,5,.3) 0%, rgba(11,7,5,.12) 28%, rgba(11,7,5,.72) 78%, rgba(11,7,5,.98) 100%);
}

/* granulado de filme */
.hero-grain{
  position:absolute; inset:-40%;
  pointer-events:none;
  opacity:.13;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1.1s steps(5) infinite;
  will-change:transform;
}
@keyframes grainShift{
  0%  { transform:translate3d(0,0,0) }
  20% { transform:translate3d(-3%,2%,0) }
  40% { transform:translate3d(2%,-3%,0) }
  60% { transform:translate3d(-2%,-2%,0) }
  80% { transform:translate3d(3%,1%,0) }
  100%{ transform:translate3d(0,0,0) }
}
/* duas colunas: título à esquerda, apoio e chamada à direita, alinhados
   pela base — a última linha do título fica na altura dos botões */
.hero-content{
  position:relative; z-index:2;
  --hero-scale:1;
  transform:scale(var(--hero-scale));
  transform-origin:left center;
  will-change:transform;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:end;
}
.hero-title{ max-width:none; }
.hero-lead{
  max-width:40ch; margin:0;
  font-size:clamp(1rem,1.5vw,1.22rem);
  color:var(--cream-dim);
  opacity:0; transform:translateY(24px);
  transition:opacity .9s var(--ease-out) .5s, transform .9s var(--ease-out) .5s;
}
.hero-buttons{
  display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.4rem;
  opacity:0; transform:translateY(24px);
  transition:opacity .9s var(--ease-out) .68s, transform .9s var(--ease-out) .68s;
}
.anime-start .hero-lead, .anime-start .hero-buttons{ opacity:1; transform:none; }
.no-js .hero-lead, .no-js .hero-buttons{ opacity:1; transform:none; }

.hero-scroll{
  position:absolute; left:var(--pad); bottom:4vh; z-index:2;
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--font-display); font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,244,236,.5);
}
.hero-scroll span{
  width:1px; height:44px; background:rgba(255,244,236,.25);
  position:relative; overflow:hidden;
}
.hero-scroll span::after{
  content:''; position:absolute; inset:0;
  background:var(--orange);
  animation:scrollHint 2s var(--ease-inout) infinite;
}
@keyframes scrollHint{ 0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(100%) } }

/* ============================================================
   POSICIONAMENTO
   ============================================================ */
.posicionamento{ position:relative; padding:clamp(4.5rem,10vh,8rem) 0; overflow:hidden; }

.marquee-parallax{
  position:absolute; inset:0; z-index:0;
  display:flex; flex-direction:column; justify-content:center; gap:1vh;
  pointer-events:none; user-select:none;
  opacity:.06;
}
.marquee-row{
  display:flex; gap:1.5rem; white-space:nowrap;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(3rem,11vw,9rem); letter-spacing:-.04em;
  color:var(--orange);
  will-change:transform;
}
.posicionamento .wrap{ position:relative; z-index:1; }

.pos-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,5vw,5rem);
  padding-bottom:clamp(3rem,8vh,6rem);
  border-bottom:1px solid rgba(255,244,236,.1);
}
.pos-col h3{ font-size:clamp(1.15rem,2vw,1.6rem); margin-bottom:1.5rem; color:var(--orange-2); }
.pos-col:first-child h3{ color:var(--cream-dim); }
.tick li{
  position:relative; padding-left:2rem; margin-bottom:1rem;
  color:var(--cream-dim);
}
.tick li::before{
  content:'→'; position:absolute; left:0; top:0;
  color:var(--orange); font-weight:700;
}
.tick--off li::before{ content:'×'; color:rgba(255,244,236,.35); }
.tick--off li{ color:rgba(201,187,176,.7); }

.stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2rem; margin-top:clamp(3rem,8vh,6rem);
}
.stat strong{
  display:block;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.6rem,5.5vw,4.6rem);
  line-height:1; letter-spacing:-.04em;
  color:var(--orange);
}
.stat span{ display:block; margin-top:.7rem; font-size:.9rem; color:var(--cream-dim); max-width:22ch; }

/* ============================================================
   VÍDEO QUE VIRA TÍTULO
   ============================================================ */
.scroll-container{ position:relative; height:230vh; }
.scroll-sticky{
  position:sticky; top:0; height:100vh;
  overflow:hidden;
  /* o conteúdo fica um pouco abaixo do centro: quando a seção se desprende e
     sobe, é o vazio ABAIXO dele que vira buraco antes da próxima seção */
  padding-top:12vh;
  display:flex; align-items:center;
  background:linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
}
.moving-video{
  position:absolute; top:50%; left:50%; z-index:3;
  width:min(1180px, 92vw, 131vh); aspect-ratio:16/9;
  transform:translate(-50%,-50%);
  overflow:hidden;
  will-change:transform, border-radius;
  box-shadow:0 40px 120px rgba(0,0,0,.6);
}
.manifesto-frame{
  width:100%; height:100%;
  border:0; display:block;
  background:var(--ink);
  pointer-events:none; /* a peça roda sozinha; o clique fica para a página */
}

.reveal-layout{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:clamp(2rem,6vw,6rem);
  width:100%;
}
.text-reveal{ flex:1 1 auto; opacity:0; transform:translateY(40px); }
.text-reveal h2{ max-width:14ch; margin-bottom:1.5rem; }
.text-reveal p{ max-width:42ch; color:var(--cream-dim); margin:0; }
.target-slot{ flex:0 0 42%; aspect-ratio:16/9; border-radius:12px; }
.no-js .moving-video{ position:relative; top:auto; left:auto; transform:none; margin:0 auto; }
.no-js .text-reveal{ opacity:1; transform:none; }
.no-js .scroll-container{ height:auto; }
.no-js .scroll-sticky{ position:static; height:auto; padding:6rem 0; display:block; }

/* ============================================================
   SERVIÇOS
   ============================================================ */
.servicos{ padding:clamp(4.5rem,10vh,8rem) 0; background:var(--ink-2); }
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;
  background:rgba(255,244,236,.1);
  border:1px solid rgba(255,244,236,.1);
  border-radius:18px;
  overflow:hidden;
}
.card{
  position:relative;
  background:var(--ink-2);
  padding:clamp(1.8rem,3vw,2.6rem);
  min-height:300px;
  display:flex; flex-direction:column;
  transition:background-color .5s ease;
}
.card:hover{ background:var(--ink-3); }
.card-num{
  font-family:var(--font-display); font-weight:700;
  font-size:.8rem; letter-spacing:.1em;
  color:var(--orange); margin-bottom:auto;
}
.card h3{ font-size:clamp(1.2rem,1.9vw,1.55rem); margin:2.6rem 0 .9rem; }
.card p{ color:var(--cream-dim); font-size:.95rem; margin:0; }
.mini{ margin-top:1.4rem; display:flex; flex-direction:column; gap:.4rem; }
.mini li{
  font-size:.82rem; color:rgba(201,187,176,.8);
  padding-left:1.1rem; position:relative;
}
.mini li::before{ content:''; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--orange); }
.card-link{
  margin-top:1.5rem;
  font-family:var(--font-display); font-weight:600; font-size:.88rem;
  color:var(--orange);
  display:inline-flex; align-items:center; gap:.4rem;
  transition:gap .35s var(--ease-out);
}
.card-link::after{ content:'→'; }
.card-link:hover{ gap:.8rem; }

/* glow card */
.glow-card{ --mx:50%; --my:50%; --alpha:0; overflow:hidden; transform:translateZ(0); }
.glow-card::before{
  content:''; position:absolute; inset:0; z-index:1;
  padding:1px; pointer-events:none;
  background:radial-gradient(190px circle at var(--mx) var(--my),
    rgba(var(--rgb-orange),calc(1 * var(--alpha))) 0%,
    rgba(var(--rgb-orange),calc(.55 * var(--alpha))) 42%,
    rgba(var(--rgb-orange),0) 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.glow-card::after{
  content:''; position:absolute; inset:0; z-index:0;
  pointer-events:none;
  background:radial-gradient(240px circle at var(--mx) var(--my),
    rgba(var(--rgb-orange),calc(.16 * var(--alpha))) 0%,
    rgba(var(--rgb-orange),0) 70%);
}
.glow-card > *{ position:relative; z-index:2; }

/* ============================================================
   BRANDING / ICEBERG
   ============================================================ */
.branding{ background:var(--sand); color:#1A0E04; padding:clamp(4.5rem,10vh,8rem) 0; }
.branding .tag{ color:var(--orange-deep); }
.branding .sec-head h2{ color:#1A0E04; }


.brand-proof{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
.brand-proof-text h3{ font-size:clamp(1.3rem,2.6vw,2rem); margin-bottom:1.2rem; }
.brand-proof-text p{ color:rgba(26,14,4,.72); margin:0; max-width:44ch; }

/* ============================================================
   JORNADA (sticky sequencial)
   ============================================================ */
.jornada{ position:relative; height:520vh; background:var(--ink); }
.jornada-sticky{
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.jornada-head{ margin-bottom:clamp(2rem,6vh,4rem); }
.jornada-head h2{ max-width:16ch; }
.jornada-stage{ position:relative; height:clamp(220px,34vh,320px); }
.stage-item{
  /* o bloco de contenção do absoluto é a padding box: sem repetir o padding
     lateral o texto sai desalinhado do título da seção */
  position:absolute; inset:0 var(--pad);
  display:flex; flex-direction:column; justify-content:center;
  max-width:34ch;
  will-change:transform, opacity;
}
.stage-num{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(3.4rem,9vw,7rem); line-height:.9; letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(var(--rgb-orange),.55);
  margin-bottom:1rem;
}
.stage-item h3{ font-size:clamp(1.7rem,3.6vw,3rem); margin-bottom:1rem; color:var(--orange); }
.stage-item p{ color:var(--cream-dim); margin:0; }
.jornada-progress{ margin-top:clamp(2rem,6vh,4rem); }
.jornada-progress i{
  display:block; height:2px; width:100%;
  background:rgba(255,244,236,.12);
  position:relative;
}
.jornada-progress i::after{
  content:''; position:absolute; left:0; top:0; height:100%;
  width:calc(var(--progress,0) * 100%);
  background:var(--orange);
}

/* ============================================================
   EQUIPE
   ============================================================ */
.equipe{ background:var(--sand-2); color:#1A0E04; padding:clamp(4.5rem,10vh,8rem) 0; }
.equipe .tag{ color:var(--orange-deep); }
.equipe .sec-head h2, .equipe h3{ color:#1A0E04; }
.equipe .sec-head-note{ color:rgba(26,14,4,.65); }
.team{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:clamp(1.4rem,3vw,2.4rem);
}
.member h3{ font-size:1.15rem; margin:1.2rem 0 .4rem; }
.member .role{ font-size:.85rem; color:rgba(26,14,4,.62); margin:0; }
.member .ph, .member .media{ transition:transform .6s var(--ease-out); }
.member:hover .ph, .member:hover .media{ transform:translateY(-6px); }

/* ============================================================
   PROVAS SOCIAIS
   ============================================================ */
.provas{ padding:clamp(4.5rem,10vh,8rem) 0; background:var(--ink); }
.mouse-gallery{ position:relative; }

.bloco + .bloco{ margin-top:clamp(3.5rem,8vh,6rem); }
.bloco-head{
  display:flex; align-items:baseline; flex-wrap:wrap;
  gap:.5rem 1.4rem;
  margin-bottom:1.8rem;
  padding-bottom:1.1rem;
  border-bottom:1px solid rgba(255,244,236,.12);
}
.bloco-head h3{ font-size:clamp(1.25rem,2.2vw,1.9rem); }
.bloco-head p{ margin:0; font-size:.88rem; color:var(--cream-dim); }

.sites-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.5vw,1.8rem);
}
.apps-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,2.5vw,1.8rem);
  align-items:start;
}
.work-meta{ margin-top:1rem; }
.work-meta strong{
  display:block;
  font-family:var(--font-display); font-weight:600;
  font-size:1rem; letter-spacing:-.01em;
  color:var(--cream);
}
.work-meta span{ font-size:.82rem; color:var(--cream-dim); }

.videos-grid, .artes-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,2.5vw,1.8rem);
}

/* tile de vídeo: prévia muda em loop, clique abre o completo com som */
.video-case{ cursor:pointer; background:#000; }
.video-case video{ width:100%; height:100%; object-fit:cover; display:block; }
.video-play{
  position:absolute; inset:0; z-index:4;
  display:grid; place-items:center;
  padding:0;
  background:linear-gradient(180deg, rgba(11,7,5,0) 45%, rgba(11,7,5,.55) 100%);
  transition:background-color .35s ease;
}
.video-play span{
  width:54px; height:54px; border-radius:50%;
  background:rgba(11,7,5,.55);
  border:1px solid rgba(255,244,236,.35);
  backdrop-filter:blur(6px);
  display:grid; place-items:center;
  transition:transform .4s var(--ease-out), background-color .3s ease, border-color .3s ease;
}
.video-play span::before{
  content:''; display:block;
  width:0; height:0; margin-left:4px;
  border-left:14px solid var(--cream);
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}
.video-case:hover .video-play span{
  transform:scale(1.12);
  background:var(--orange); border-color:transparent;
}
.video-case:hover .video-play span::before{ border-left-color:#160A00; }
.video-full{ width:100%; height:100%; object-fit:contain; background:#000; }
.case-meta{ margin-top:1rem; }
.case-meta strong{
  display:block;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.3rem,2.4vw,2rem); letter-spacing:-.03em;
  color:var(--orange);
}
.case-meta span{ font-size:.82rem; color:var(--cream-dim); }
.cases-note{ margin-top:1.6rem; font-size:.78rem; color:rgba(201,187,176,.55); }

.aplicacoes{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(1rem,2.5vw,1.6rem);
  margin-bottom:clamp(4rem,9vh,7rem);
}
.provas .sub-head{ margin-top:clamp(4rem,9vh,7rem); }

.clientes{ overflow:hidden; }
.clientes-title{
  font-family:var(--font-display); font-size:.75rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cream-dim);
  margin:0 0 2rem;
}
.marquee{ display:flex; gap:2.5rem; width:max-content; animation:marqueeSlide 42s linear infinite; }
.marquee:hover{ animation-play-state:paused; }
.marquee-track{ display:flex; gap:2.5rem; }
.marquee-track span{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.2rem,2.6vw,2.2rem); letter-spacing:-.02em;
  color:rgba(255,244,236,.34); white-space:nowrap;
  transition:color .3s ease;
}
.marquee-track span:hover{ color:var(--orange); }
@keyframes marqueeSlide{ to{ transform:translateX(calc(-50% - 1.25rem)); } }
.clientes-note{ margin-top:2rem; font-size:.8rem; color:rgba(201,187,176,.5); }

/* trilha do mouse */
.trail-frame{
  position:fixed; top:0; left:0; z-index:20;
  width:230px; aspect-ratio:6/4;
  border-radius:10px; overflow:hidden;
  pointer-events:none; opacity:0;
  transform:translate3d(var(--x),var(--y),0) translate(-50%,-50%) scale(.94);
  filter:blur(10px);
  will-change:transform,opacity,filter;
  animation:trailFrame 1.9s var(--ease-out) forwards;
  background:var(--ink-3);
  border:1px solid rgba(var(--rgb-orange),.35);
}
.trail-frame img{ width:100%; height:100%; object-fit:cover; }
@keyframes trailFrame{
  0%{ opacity:0; filter:blur(10px); transform:translate3d(var(--x),var(--y),0) translate(-50%,-50%) scale(.94) }
  18%{ opacity:1; filter:blur(0); transform:translate3d(var(--x),var(--y),0) translate(-50%,-50%) scale(1) }
  70%{ opacity:1; filter:blur(0) }
  100%{ opacity:0; filter:blur(8px); transform:translate3d(var(--x),var(--y),0) translate(-50%,-50%) scale(1.04) }
}

/* ============================================================
   CTA FINAL (laranja cheio)
   ============================================================ */
.cta{
  background:
    radial-gradient(70% 90% at 80% 10%, var(--orange-3), transparent 60%),
    linear-gradient(160deg, var(--orange-2) 0%, var(--orange) 55%, var(--orange-deep) 100%);
  color:#2A1403;
  padding:clamp(5rem,12vh,10rem) 0;
  text-align:center;
}
.cta .display{ color:#160A00; }
.cta-inner{ display:flex; flex-direction:column; align-items:center; }
.cta-lead{ max-width:44ch; margin:2rem 0 0; color:rgba(22,10,0,.72); font-size:clamp(1rem,1.5vw,1.2rem); }
.cta-buttons{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:2.8rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); padding:clamp(4rem,9vh,7rem) 0 2.5rem; }
.footer-inner{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:2.5rem;
  padding-bottom:2.5rem; border-bottom:1px solid rgba(255,244,236,.1);
}
.footer-links{ display:flex; flex-wrap:wrap; gap:1.4rem; font-size:.92rem; color:var(--cream-dim); }
.footer-links a:hover{ color:var(--orange); }
.footer-contact{ display:flex; flex-direction:column; gap:.4rem; font-family:var(--font-display); font-weight:600; }
.footer-contact a:hover{ color:var(--orange); }
.footer-bottom{ padding-top:2rem; font-size:.78rem; color:rgba(201,187,176,.5); }

/* ============================================================
   COOKIES
   ============================================================ */
/* barra rasa no rodapé: não cobre o CTA principal do hero */
.cookies-container{
  position:fixed; left:0; right:0; bottom:0;
  z-index:950;
  padding:clamp(10px,1.6vw,16px);
}
.cookies-box{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem;
  max-width:var(--wrap); margin-inline:auto;
  background:rgba(19,13,8,.94);
  backdrop-filter:blur(12px);
  border:1px solid rgba(var(--rgb-orange),.3);
  border-radius:14px; padding:1rem 1.3rem;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.cookies-box p{ margin:0; flex:1 1 320px; font-size:.82rem; color:var(--cream-dim); }
.cookies-opts{ display:flex; gap:1.2rem; font-size:.82rem; }
.cookies-opts label{ display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; }
.cookies-opts input{ accent-color:var(--orange); }

/* ============================================================
   FOCO ACESSÍVEL
   ============================================================ */
:where(a,button,input):focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
  border-radius:4px;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:900px){
  .hero-content{ grid-template-columns:1fr; align-items:start; gap:2rem; }
  .hero-lead{ max-width:46ch; }
}

@media (min-width:1025px){
  /* faixa mais larga só aqui: dá espaço para o quadro do motion crescer
     sem espremer a coluna de texto ao lado */
  .reveal-layout{ max-width:min(1440px, 94vw); }
}

@media (max-width:1024px){
  .sec-head--split{ flex-direction:column; align-items:flex-start; gap:1.5rem; }
  .brand-proof{ grid-template-columns:1fr; }
  .target-slot{ display:none; }
  .reveal-layout{ justify-content:flex-start; }
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:768px){
  :root{ --header-h:66px; }
  .header-cta{ display:none; }
  .pos-grid{ grid-template-columns:1fr; }
  .has-submenu .submenu{ grid-template-columns:1fr; }
  .hero-scroll{ display:none; }
  .cards{ border-radius:14px; }
  .videos-grid, .artes-grid, .apps-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cf-arrow{ width:42px; height:42px; }
  .sites-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .float-cta span{ display:none; }
  .float-cta{ padding:1rem; }

  /* jornada empilhada no mobile */
  .jornada{ height:auto; padding:clamp(5rem,12vh,8rem) 0; }
  .jornada-sticky{ position:static; height:auto; display:block; }
  .jornada-stage{ position:static; height:auto; display:flex; flex-direction:column; gap:3rem; }
  .stage-item{ position:static; inset:auto; transform:none !important; opacity:1 !important; max-width:none; }
  .jornada-progress{ display:none; }

  /* vídeo/título empilhados */
  .scroll-container{ height:auto; }
  .scroll-sticky{ position:static; height:auto; display:block; padding:clamp(5rem,12vh,8rem) 0; }
  .moving-video{ position:relative; top:auto; left:auto; transform:none !important; width:100%; margin-bottom:3rem; border-radius:12px !important; }
  .text-reveal{ opacity:1 !important; transform:none !important; }
  .trail-frame{ display:none; }
}

@media (max-width:520px){
  .sites-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .team{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .video-play span{ width:44px; height:44px; }
  .cookies-box{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .hero-title, .js .lines{ opacity:1 !important; }
  .hero-title .line span, .lines .line span{ transform:none !important; opacity:1 !important; }
  .anime{ opacity:1 !important; transform:none !important; }
  .image-reveal::before{ display:none; }
  .image-reveal .ph-label,
  .image-reveal img,
  .image-reveal video,
  .image-reveal .video-play{ opacity:1 !important; transform:none !important; filter:none !important; }
  .hero-lead, .hero-buttons, .text-reveal{ opacity:1 !important; transform:none !important; }
    .marquee{ animation:none; }
  .cf-inner{ transition:none; }
  .hero-grain{ animation:none; }
  .hero-video{ opacity:1 !important; }
  .jornada{ height:auto; }
  .jornada-sticky{ position:static; height:auto; display:block; padding:6rem 0; }
  .jornada-stage{ position:static; height:auto; display:flex; flex-direction:column; gap:3rem; }
  .stage-item{ position:static; transform:none !important; opacity:1 !important; }
  .scroll-container{ height:auto; }
  .scroll-sticky{ position:static; height:auto; display:block; padding:6rem 0; }
  .moving-video{ position:relative; top:auto; left:auto; transform:none !important; margin:0 auto 3rem; }
}

/* ============================================================
   COVERFLOW — serviços
   O item ativo é um cartão grande; os demais viram ripas finas.
   Cada cartão é posicionado pela distância assinada até o centro,
   com quebra circular, então o passo é sempre de uma ripa e o loop
   não tem emenda visível.
   ============================================================ */
.coverflow{
  position:relative;
  height:var(--cf-h, 420px);
  margin-top:clamp(1rem,3vw,2.5rem);
  overflow:hidden;
  isolation:isolate;
  touch-action:pan-y;
}
.cf-stage{ position:absolute; inset:0; }
.cf-card{
  position:absolute; left:50%; top:50%;
  will-change:transform, opacity;
  cursor:pointer;
}
.cf-inner{
  transform:translate(-50%,-50%);
  overflow:hidden;
  border-radius:10px;
  background:var(--ink-2);
  box-shadow:0 14px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,244,236,.05);
  transition:box-shadow .45s ease;
}
.cf-card.is-active{ cursor:default; }
.cf-card.is-active .cf-inner{
  box-shadow:0 26px 70px rgba(0,0,0,.6), inset 0 0 0 1px rgba(var(--rgb-orange),.25);
}
.cf-ph{ width:100%; height:100%; border-radius:0; border-width:0; }
.cf-img{ width:100%; height:100%; object-fit:cover; display:block; }

.cf-arrow{
  position:absolute; top:50%;
  transform:translateY(-50%);
  width:52px; height:52px;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--orange); color:#160A00;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  z-index:2000;
  transition:background-color .3s ease, transform .35s var(--ease-out);
}
.cf-arrow:hover{ background:var(--orange-2); transform:translateY(-50%) scale(1.07); }
.cf-arrow--prev{ left:clamp(10px,2.5vw,40px); }
.cf-arrow--next{ right:clamp(10px,2.5vw,40px); }


/* ============================================================
   MODAL DE SERVIÇO
   ============================================================ */
.modal{
  width:min(760px, calc(100vw - 2rem));
  max-height:min(86vh, 900px);
  padding:0; border:0;
  background:transparent;
  overflow:visible;
  color:var(--cream);
}
.modal::backdrop{
  background:rgba(6,4,3,.78);
  backdrop-filter:blur(6px);
}
.modal-inner{
  position:relative;
  max-height:min(86vh, 900px);
  overflow-y:auto;
  padding:clamp(1.8rem,4vw,3rem);
  border-radius:18px;
  background:var(--ink-2);
  border:1px solid rgba(var(--rgb-orange),.28);
  box-shadow:0 40px 120px rgba(0,0,0,.65);
}
.modal-close{
  position:absolute; top:1rem; right:1rem;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--cream);
  background:rgba(255,244,236,.08);
  transition:background-color .3s ease, color .3s ease;
}
.modal-close:hover{ background:var(--orange); color:#160A00; }
.modal-num{
  display:block;
  font-family:var(--font-display); font-weight:700;
  font-size:.8rem; letter-spacing:.16em;
  color:var(--orange);
  margin-bottom:.9rem;
}
.modal-title{
  font-size:clamp(1.5rem,3.2vw,2.4rem);
  margin:0 0 1.2rem;
  max-width:18ch;
}
.modal-text p{ margin:0 0 1.4rem; color:var(--cream-dim); max-width:56ch; }
.modal-text .mini{ margin:0 0 1.6rem; }
.modal-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-display); font-weight:600; font-size:.9rem;
  color:var(--orange);
  transition:gap .35s var(--ease-out);
}
.modal-link::after{ content:'→'; }
.modal-link:hover{ gap:.8rem; }

.modal-galeria{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.8rem;
  margin-top:1.8rem;
  padding-top:1.8rem;
  border-top:1px solid rgba(255,244,236,.12);
}
.modal-galeria .ph{ aspect-ratio:4/3; }
.modal-galeria .ph-label{ font-size:.72rem; padding:.7em; }
.modal-galeria .ph-label em{ font-size:.62rem; }

/* trava a página enquanto o modal está aberto */
html.is-locked, html.is-locked body{ overflow:hidden; }

@media (max-width:620px){
  .modal{ width:100vw; max-height:100vh; }
  .modal-inner{ max-height:100vh; border-radius:0; min-height:100vh; }
  .modal-galeria{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cf-overlay{ padding:1rem 1.1rem; }
}


/* ============================================================
   PRÉVIA DE SITE AO VIVO
   O iframe tem 1440x900 — um viewport de desktop de verdade, para o
   site renderizar no layout certo (um iframe muito alto faria todo
   `100vh` do site esticar junto). Em repouso o enquadramento é
   fechado no rosto do cachorro da capa; no hover ele recua e mostra
   a página inteira. pointer-events:none impede que a roda do mouse
   seja capturada pelo iframe.
   ============================================================ */
.site-embed{
  position:relative; display:block;
  width:100%; padding:0; text-align:left; appearance:none;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:14px;
  background:var(--ink-2);
  border:1px solid rgba(255,244,236,.12);
  cursor:pointer;
  transition:border-color .35s ease, transform .5s var(--ease-out);
}
.site-embed:hover{ border-color:rgba(var(--rgb-orange),.5); transform:translateY(-4px); }
.site-frame{
  position:absolute; top:0; left:0;
  width:1440px; height:900px;
  border:0;
  transform-origin:0 0;
  transform:translate(var(--tx,0px), var(--ty,0px)) scale(var(--escala,.24));
  transition:transform 1.1s var(--ease-out);
  pointer-events:none;
}
.site-embed:hover .site-frame{
  transform:translate(0px,0px) scale(var(--escala-fit,.24));
}
.site-hint{
  position:absolute; right:.8rem; bottom:.8rem; z-index:2;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .9rem;
  border-radius:999px;
  background:rgba(11,7,5,.7);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,244,236,.2);
  font-family:var(--font-display); font-weight:600; font-size:.78rem;
  color:var(--cream);
  opacity:0; transform:translateY(6px);
  transition:opacity .35s ease, transform .35s var(--ease-out), background-color .3s ease, color .3s ease;
}
.site-embed:hover .site-hint{
  opacity:1; transform:none;
  background:var(--orange); color:#160A00; border-color:transparent;
}

/* ---- modal com o site navegável ---- */
.modal--site{
  width:min(1400px, 94vw);
  height:min(880px, 90vh);
  max-height:90vh;
}
.modal-site-inner{
  display:flex; flex-direction:column;
  height:100%;
  border-radius:16px; overflow:hidden;
  background:var(--ink-2);
  border:1px solid rgba(var(--rgb-orange),.28);
  box-shadow:0 40px 120px rgba(0,0,0,.65);
}
.modal-site-bar{
  flex:none;
  display:flex; align-items:center; gap:1rem;
  padding:.85rem 1rem .85rem 1.3rem;
  border-bottom:1px solid rgba(255,244,236,.12);
}
.modal-site-nome{
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  color:var(--cream);
}
.modal-site-nome{ flex:1; }
.modal-close--barra{ position:static; width:34px; height:34px; }
.modal-site-frame{
  flex:1; width:100%; border:0; display:block;
  background:#fff;
}

@media (max-width:620px){
  .modal--site{ width:100vw; height:100vh; max-height:100vh; }
  .modal-site-inner{ border-radius:0; }

}

@media (prefers-reduced-motion: reduce){
  .site-embed:hover .site-frame{ transition:none; }
  .site-embed:hover{ transform:none; }
}


/* ============================================================
   ICEBERG — sem desenho: a composição é a metáfora
   Acima da linha, itens pequenos e leves. Abaixo, itens grandes e
   sólidos sobre uma água que escurece conforme desce. O nível
   acompanha a rolagem (--water).
   ============================================================ */
.iceberg{
  position:relative;
  margin:clamp(2rem,6vh,4rem) 0 clamp(3rem,7vh,5rem);
  --water:0;
}
.iceberg::before{ content:none; }

.iceberg-inner{ position:relative; z-index:2; }
/* base dos itens: a lista flui em linha e quebra sozinha */
.chips{
  display:flex; flex-wrap:wrap;
  gap:.7rem;
  list-style:none; margin:0; padding:0;
}
.chips > li{ display:block; }
.chip{
  display:inline-flex; align-items:center;
  border-radius:999px;
  border:1px solid transparent;
  font-family:var(--font-display);
  line-height:1.2;
  cursor:pointer;
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease-out), transform .35s var(--ease-out),
             background-color .3s ease, border-color .3s ease,
             color .3s ease, box-shadow .3s ease;
  transition-delay:calc(var(--i, 0) * .05s);
}
.iceberg.is-active .chip{ opacity:1; transform:none; }
.chip:hover, .chip:focus-visible, .chip.is-on{ transform:translateY(-3px); }


/* ---- acima da água ---- */
.iceberg-side--top{ padding:0 0 clamp(1.4rem,3vw,2.2rem); }
.iceberg-side--top .chip{
  padding:.6em 1.1em;
  font-size:clamp(.84rem,1.15vw,.96rem);
  font-weight:500;
  background:transparent;
  border-color:rgba(26,14,4,.22);
  color:rgba(26,14,4,.72);
}
.iceberg-side--top .chip:hover,
.iceberg-side--top .chip:focus-visible{
  background:#fff; color:#1A0E04;
  border-color:rgba(var(--rgb-orange),.55);
  box-shadow:0 8px 20px rgba(26,14,4,.1);
}

/* ---- a linha ---- */
.waterline{
  position:relative; height:1px;
  background:rgba(26,14,4,.18);
  margin:0;
}
.waterline::after{
  content:''; position:absolute; left:0; top:0; height:1px;
  width:calc(var(--water) * 100%);
  background:linear-gradient(90deg, var(--orange-deep), var(--orange));
  box-shadow:0 0 18px 1px rgba(var(--rgb-orange),.45);
  transition:width .12s linear;
}
/* brilho lento correndo pela linha, no lugar da onda desenhada */
.waterline::before{
  content:''; position:absolute; top:-1px; left:0; height:3px; width:34%;
  background:linear-gradient(90deg, transparent, rgba(var(--rgb-orange),.55), transparent);
  filter:blur(1px);
  animation:brilhoCorre 7s ease-in-out infinite;
}
@keyframes brilhoCorre{
  0%,100%{ transform:translateX(-40%); opacity:0 }
  50%    { transform:translateX(220%); opacity:1 }
}
.waterline-label{
  position:absolute; right:0; top:.6rem;
  font-family:var(--font-display);
  font-size:.66rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(26,14,4,.4);
}

/* ---- abaixo da água ---- */
.iceberg-side--bottom{
  position:relative;
  padding:clamp(2.6rem,6vw,4rem) clamp(1.2rem,3vw,2.4rem) clamp(2rem,5vw,3rem);
  margin-top:0;
  border-radius:0 0 18px 18px;
  overflow:hidden;
}
/* a água: escurece para baixo e sobe junto com a rolagem */
.fundo-profundidade{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,
    rgba(var(--rgb-orange),.10) 0%,
    rgba(var(--rgb-orange),.22) 45%,
    rgba(199,74,0,.34) 100%);
  transform:scaleY(var(--water)); transform-origin:top;
  transition:transform .12s linear;
}
.iceberg-side--bottom > *:not(.fundo-profundidade){ position:relative; z-index:1; }

.iceberg-side--bottom .iceberg-caption{ color:var(--orange-deep); }
.iceberg-side--bottom .chips{ gap:.8rem; }
.iceberg-side--bottom .chip{
  padding:.82em 1.5em;
  font-size:clamp(1rem,1.75vw,1.35rem);
  font-weight:600;
  background:var(--orange);
  border-color:transparent;
  color:#160A00;
  box-shadow:0 6px 18px rgba(199,74,0,.22);
}
.iceberg-side--bottom .chip:hover,
.iceberg-side--bottom .chip:focus-visible{
  background:#160A00; color:var(--orange-3);
  box-shadow:0 14px 32px rgba(22,10,0,.32);
}

@media (prefers-reduced-motion: reduce){
  .waterline::before{ animation:none; }
  .chip{ opacity:1 !important; transform:none !important; }
}

/* ---- painel que explica o pilar escolhido ---- */
.iceberg-detalhe{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:baseline;
  column-gap:1.1rem;
  row-gap:.35rem;
  margin:clamp(1.4rem,3.5vh,2.2rem) 0 0;
  min-height:4.2em;
  max-width:62ch;
  padding-left:1.1rem;
  border-left:2px solid rgba(var(--rgb-orange),.45);
  transition:border-color .35s ease;
}
.iceberg-detalhe strong{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1rem,1.5vw,1.2rem);
  letter-spacing:-.01em;
  color:var(--orange-deep);
  white-space:nowrap;
}
.iceberg-detalhe span{
  font-size:clamp(.95rem,1.4vw,1.08rem);
  line-height:1.55;
  color:rgba(26,14,4,.78);
}
@media (max-width:640px){
  .iceberg-detalhe{ grid-template-columns:1fr; row-gap:.2rem; }
  .iceberg-detalhe strong{ white-space:normal; }
}

/* ============================================================
   BARRA DE ROLAGEM
   ============================================================ */
html{
  scrollbar-width:thin;
  scrollbar-color:var(--orange) var(--ink-2);
}
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--ink-2); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--orange-2), var(--orange-deep));
  border-radius:99px;
  border:3px solid var(--ink-2);   /* afina o polegar sem estreitar a pista */
}
::-webkit-scrollbar-thumb:hover{ background:var(--orange); }
::-webkit-scrollbar-corner{ background:var(--ink-2); }
/* painéis com rolagem própria */
.modal-inner{ scrollbar-width:thin; scrollbar-color:var(--orange) transparent; }

/* ============================================================
   CURSOR PRÓPRIO
   Um ponto que acompanha exato e um anel que chega com atraso.
   Só entra em ponteiro fino; a classe é posta pelo JS, então sem
   script o cursor do sistema continua valendo.
   ============================================================ */
.cursor-custom, .cursor-custom *{ cursor:none !important; }

.cursor-ponto, .cursor-anel{
  position:fixed; top:0; left:0; z-index:9998;
  pointer-events:none;
  will-change:transform;
  opacity:0;
  transition:opacity .25s ease;
}
.cursor-ativo .cursor-ponto, .cursor-ativo .cursor-anel{ opacity:1; }

.cursor-ponto{
  width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:50%;
  background:var(--orange);
}
.cursor-anel{
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border-radius:50%;
  border:1.5px solid rgba(var(--rgb-orange),.65);
  display:grid; place-items:center;
  transition:width .32s var(--ease-out), height .32s var(--ease-out),
             margin .32s var(--ease-out), background-color .3s ease,
             border-color .3s ease, opacity .25s ease;
}
.cursor-anel span{
  font-family:var(--font-display);
  font-weight:600; font-size:.72rem;
  letter-spacing:.06em; text-transform:lowercase;
  color:#160A00;
  opacity:0; transition:opacity .2s ease;
  white-space:nowrap;
}

/* sobre algo clicável: o anel cresce e ganha corpo */
.cursor-anel.em-link{
  width:54px; height:54px; margin:-27px 0 0 -27px;
  background:rgba(var(--rgb-orange),.16);
  border-color:rgba(var(--rgb-orange),.9);
}
/* sobre algo com etiqueta: vira pastilha sólida com a palavra */
.cursor-anel.com-etiqueta{
  width:78px; height:78px; margin:-39px 0 0 -39px;
  background:var(--orange);
  border-color:transparent;
}
.cursor-anel.com-etiqueta span{ opacity:1; }
/* o ponto some quando o anel vira etiqueta, senão fica sujo no meio */
.cursor-anel.com-etiqueta ~ .cursor-ponto, .cursor-ponto.escondido{ opacity:0; }

/* ============================================================
   CHAMADA DE WHATSAPP NA DOBRA DE CADA SEÇÃO
   Faixa discreta com uma pergunta e o botão, separada do conteúdo
   por um filete. Herda o tema da seção em que está.
   ============================================================ */
.cta-dobra{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between;
  gap:1rem 2rem;
  margin-top:clamp(2.4rem,5.5vh,3.6rem);
  padding-top:clamp(1.5rem,3vh,2.2rem);
  border-top:1px solid rgba(255,244,236,.14);
}
.cta-dobra p{
  margin:0;
  font-family:var(--font-display);
  font-weight:600; letter-spacing:-.015em;
  font-size:clamp(1.05rem,1.9vw,1.45rem);
  max-width:34ch;
  color:var(--cream);
}
/* seções claras: o filete e o texto precisam inverter */
.branding .cta-dobra, .equipe .cta-dobra{ border-top-color:rgba(26,14,4,.16); }
.branding .cta-dobra p, .equipe .cta-dobra p{ color:#1A0E04; }

/* na seção fixa o botão entra solto, abaixo do parágrafo */
.cta-inline{ margin-top:1.8rem; }

@media (max-width:620px){
  .cta-dobra{ gap:1.2rem; }
  .cta-dobra .btn{ width:100%; }
}

/* legenda dos cases: identificação da peça no lugar dos números */
.case-meta strong{
  display:block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(.95rem,1.4vw,1.12rem);
  letter-spacing:-.01em;
  line-height:1.25;
  color:var(--cream);
}
.case-meta span{
  display:block;
  margin-top:.2rem;
  font-size:.82rem;
  color:var(--orange-2);
}

/* ============================================================
   IDENTIDADE VISUAL — peças em 16:9 com legenda do cliente
   ============================================================ */
.aplicacoes{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2.5vw,1.8rem);
}
.aplicacao{ margin:0; }
.aplicacao figcaption{
  margin-top:.8rem;
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
  color:var(--cream);
}

/* ============================================================
   MARQUISE DE LOGOS
   Os arquivos vêm em cores diferentes; dessaturar e clarear
   padroniza sem achatar em silhueta (o que apagaria blocos
   preenchidos, como a caixa do "Master Tech").
   ============================================================ */
.marquee--logos .marquee-track{ align-items:center; gap:clamp(2.5rem,5vw,4.5rem); }
.marquee--logos img{
  height:clamp(30px,3.4vw,44px);
  width:auto; max-width:150px;
  object-fit:contain;
  filter:grayscale(1) brightness(1.7) contrast(.95);
  opacity:.55;
  transition:opacity .35s ease, filter .35s ease;
}
.marquee--logos img:hover{ opacity:1; filter:none; }

/* ============================================================
   O ORÁCULO
   ============================================================ */
.oraculo{ background:var(--ink-2); padding:clamp(4.5rem,10vh,8rem) 0; }
.oraculo-grade{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.9rem,2vw,1.2rem);
}
.oraculo-card{
  position:relative;
  background:rgba(255,244,236,.035);
  border:1px solid rgba(var(--rgb-orange),.14);
  border-radius:18px;
  padding:clamp(1.3rem,2.2vw,1.6rem);
  display:flex; flex-direction:column; gap:.7rem;
}
.oraculo-ico{
  width:42px; height:42px; border-radius:12px;
  background:rgba(var(--rgb-orange),.14);
  display:grid; place-items:center; font-size:20px;
}
.oraculo-card h3{ font-size:1.05rem; color:var(--cream); }
.oraculo-card p{ margin:0; font-size:.88rem; line-height:1.55; color:var(--cream-dim); }

/* ============================================================
   APLICATIVOS EM HTML
   Cada peça roda num viewport de celular fixo e é reduzida para
   caber no cartão — o mesmo princípio das prévias de site.
   ============================================================ */
.app-embed{
  position:relative;
  overflow:hidden;
  background:var(--ink-2);
  border:1px solid rgba(255,244,236,.12);
}
.app-frame{
  position:absolute; top:0; left:0;
  width:420px; height:747px;
  border:0;
  transform-origin:0 0;
  transform:scale(var(--escala-app,.3));
  pointer-events:none;
}

@media (max-width:768px){
  .oraculo-grade{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .oraculo-grade, .aplicacoes{ grid-template-columns:1fr; }
}