/* ============================================================
   ROVAS CREATIVE
   Identidade monocromática, derivada da própria imagem do vídeo.
   Nenhuma cor de acento: hierarquia por escala, peso e branco.
   ============================================================ */
:root{
  --black:   #000;
  --surface: #0a0a0a;
  --raised:  #131313;
  --white:   #fff;
  --grey:    #8c8c8c;
  --grey-dim:#5a5a5a;
  --line:    rgba(255,255,255,.14);

  --sans: "Archivo", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --gut: clamp(18px, 5vw, 72px);
  --maxw: 1440px;
}

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

html{ scroll-behavior:smooth; background:var(--black); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--black); color:var(--white);
  font-family:var(--sans); font-weight:400;
  font-size:clamp(1rem,.95rem + .22vw,1.08rem); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

a{ color:inherit; }
img,video{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid var(--white); outline-offset:3px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }

/* ---------- tipografia ---------- */
.display{
  font-variation-settings:"wdth" 88,"wght" 800;
  text-transform:uppercase; letter-spacing:-.035em; line-height:.9;
  margin:0;
}
.eyebrow{
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--grey);
  margin:0 0 1.6rem; display:flex; align-items:center; gap:.9rem;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ============================================================
   MARCAS DE ENQUADRAMENTO + TIMECODE
   Guias de câmera fixas sobre toda a página. Assinatura visual.
   ============================================================ */
.gate{ position:fixed; inset:0; z-index:60; pointer-events:none; }
.gate i{ position:absolute; width:26px; height:26px; opacity:.5; }
.gate i::before,.gate i::after{ content:""; position:absolute; background:var(--white); }
.gate i::before{ width:100%; height:1px; } .gate i::after{ width:1px; height:100%; }
.gate .tl{ top:18px; left:18px; }
.gate .tr{ top:18px; right:18px; }  .gate .tr::after{ right:0; }
.gate .bl{ bottom:18px; left:18px; } .gate .bl::before{ bottom:0; }
.gate .br{ bottom:18px; right:18px; } .gate .br::before{ bottom:0; } .gate .br::after{ right:0; }
.gate__tc{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  color:var(--grey-dim); white-space:nowrap;
}
@media (max-width:700px){ .gate i{ width:16px; height:16px; } .gate__tc{ display:none; } }

/* ============================================================
   TOPO
   ============================================================ */
.top{
  position:fixed; top:0; left:0; right:0; z-index:70;
  padding:2.2rem var(--gut); display:flex; align-items:flex-start;
  justify-content:space-between; gap:1rem;
  transition:background .4s, padding .4s;
}
.top.is-stuck{ background:rgba(0,0,0,.86); backdrop-filter:blur(14px); padding-top:1.1rem; padding-bottom:1.1rem; }

/* ---------- lockup oficial: símbolo + tipografia ---------- */
.mark{
  display:flex; align-items:center; gap:clamp(.7rem,1.6vw,1.15rem);
  text-decoration:none; line-height:0;
}
.mark__symbol{
  height:clamp(30px,3.4vw,42px); width:auto; flex:none;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), opacity .3s;
}
.mark__word{
  height:clamp(22px,2.5vw,31px); width:auto;
  transition:opacity .3s;
}
.mark:hover .mark__symbol{ transform:rotate(-8deg) scale(1.06); }
.mark:hover .mark__word{ opacity:.7; }
.top.is-stuck .mark__symbol{ height:clamp(26px,2.6vw,32px); }
.top.is-stuck .mark__word{ height:clamp(18px,1.9vw,23px); }
/* no celular sobra só o símbolo — leitura limpa em pouco espaço */
@media (max-width:560px){ .mark__word{ display:none; } }
.nav{ display:flex; gap:1.9rem; font-family:var(--mono);
      font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; padding-top:.4rem; }
.nav a{ color:var(--grey); text-decoration:none; transition:color .25s; }
.nav a:hover{ color:var(--white); }

/* botão hambúrguer */
.burger{
  display:none; position:relative; z-index:70;
  width:44px; height:44px; padding:0; margin:-6px -10px 0 0;
  background:none; border:0; cursor:pointer;
}
.burger span{
  display:block; width:26px; height:1.5px; margin:6px auto;
  background:var(--white); border-radius:2px;
  transition:transform .38s cubic-bezier(.2,.7,.3,1), opacity .25s;
}
.burger.is-open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; transform:scaleX(.4); }
.burger.is-open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

@media (max-width:700px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:0; z-index:65;
    flex-direction:column; justify-content:center; align-items:stretch;
    gap:0; padding:0 var(--gut);
    background:rgba(0,0,0,.97); backdrop-filter:blur(22px);
    font-family:var(--sans); font-size:1.7rem; letter-spacing:-.01em; text-transform:uppercase;
    opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s;
  }
  .nav.is-open{ opacity:1; visibility:visible; }
  body.menu-aberto{ overflow:hidden; }
  .nav a{
    color:var(--white); padding:1.15rem 0;
    border-bottom:1px solid var(--line);
    font-variation-settings:"wdth" 88,"wght" 600;
  }
  .nav a:first-child{ border-top:1px solid var(--line); }
}

/* ============================================================
   HERO — vídeo em tela cheia
   ============================================================ */
.hero{ position:relative; height:100svh; min-height:520px; overflow:hidden; }
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.hero__scrim{ /* escurece a base para o texto ter contraste */
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.92) 2%, rgba(0,0,0,.25) 46%, rgba(0,0,0,.55));
}
.hero__body{
  position:absolute; left:0; right:0; bottom:clamp(4.5rem,11vh,7.5rem);
  padding:0 var(--gut);
}
.hero__inner{ max-width:var(--maxw); margin:0 auto; }
.hero__kicker{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--grey); margin:0 0 1.4rem;
}

/* selo de status — em construção */
.status{
  display:inline-flex; align-items:center; gap:.75rem;
  border:1px solid var(--line); background:rgba(0,0,0,.42);
  backdrop-filter:blur(10px); padding:.6rem 1.15rem; margin:0 0 1.5rem;
  font-family:var(--mono); font-size:.62rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--white);
}
.status em{ font-style:normal; color:var(--grey); }
.status__dot{
  position:relative; width:6px; height:6px; border-radius:50%;
  background:var(--white); flex:none;
}
.status__dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--white); animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{ 0%{ transform:scale(.5); opacity:1; } 80%,100%{ transform:scale(1.9); opacity:0; } }
@media (max-width:520px){ .status{ font-size:.55rem; letter-spacing:.14em; padding:.5rem .85rem; } }
.hero__title{ font-size:clamp(2.9rem,10.5vw,9.5rem); }
.hero__title span{ display:block; }
.hero__title span:nth-child(2){ font-variation-settings:"wdth" 88,"wght" 200; }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:1.6rem; align-items:center;
  margin-top:2.2rem; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--grey);
}

/* botão de som */
.sound{
  display:inline-flex; align-items:center; gap:.6rem;
  background:transparent; border:1px solid var(--line); color:var(--white);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.6rem 1.1rem; cursor:pointer; transition:background .25s, border-color .25s;
}
.sound:hover{ background:rgba(255,255,255,.1); border-color:var(--white); }
.sound__bars{ display:flex; align-items:flex-end; gap:2px; height:11px; }
.sound__bars i{ width:2px; height:3px; background:currentColor; }
.sound.is-on .sound__bars i{ animation:eq .9s ease-in-out infinite; }
.sound.is-on .sound__bars i:nth-child(2){ animation-delay:.15s; }
.sound.is-on .sound__bars i:nth-child(3){ animation-delay:.3s; }
.sound.is-on .sound__bars i:nth-child(4){ animation-delay:.45s; }
@keyframes eq{ 0%,100%{ height:3px; } 50%{ height:11px; } }

.scroll-cue{
  position:absolute; right:var(--gut); bottom:clamp(4.5rem,11vh,7.5rem);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--grey); text-decoration:none;
  writing-mode:vertical-rl; display:flex; align-items:center; gap:.8rem;
}
.scroll-cue::after{ content:""; width:1px; height:52px; background:linear-gradient(var(--grey),transparent); }
@media (max-width:900px){ .scroll-cue{ display:none; } }

/* ---------- hero no celular: vídeo inteiro, sem corte ---------- */
@media (max-width:700px){
  .hero{
    height:auto; min-height:0; display:flex; flex-direction:column;
    padding-top:6.6rem;
  }
  .hero__video{
    position:relative; inset:auto;
    width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  }
  .hero__scrim{ display:none; }
  .hero__body{
    position:relative; left:auto; right:auto; bottom:auto;
    padding:2.1rem var(--gut) 3.6rem;
  }
  .hero__title{ font-size:clamp(2.6rem,12vw,4rem); }
  .hero__meta{ margin-top:1.8rem; gap:1.1rem; }
}

/* ============================================================
   SEÇÕES
   ============================================================ */
.sec{ padding:clamp(5rem,13vh,10rem) 0; }
.sec--line{ border-top:1px solid var(--line); }

/* manifesto */
.manifesto{
  font-variation-settings:"wdth" 92,"wght" 300;
  font-size:clamp(1.6rem,4.4vw,3.4rem); line-height:1.16;
  letter-spacing:-.02em; max-width:19ch; margin:0;
}
.manifesto b{ font-variation-settings:"wdth" 92,"wght" 800; }
.manifesto-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:end; }
@media (max-width:860px){ .manifesto-grid{ grid-template-columns:1fr; align-items:start; } }
.manifesto-side p{ color:var(--grey); margin:0 0 1.1rem; max-width:42ch; }

/* ---------- trabalhos ---------- */
.reel{ display:grid; gap:clamp(3rem,7vw,6rem); }
.piece{ display:block; text-decoration:none; }
.piece__frame{
  position:relative; overflow:hidden; background:var(--surface);
  aspect-ratio:16/9;
}
.piece__frame img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.68) contrast(1.05);
  transition:filter .6s ease, transform .9s cubic-bezier(.2,.7,.3,1);
}
.piece:hover .piece__frame img{ filter:brightness(1) contrast(1); transform:scale(1.035); }
.piece__tag{
  position:absolute; top:1rem; left:1rem; z-index:2;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  background:rgba(0,0,0,.6); backdrop-filter:blur(6px);
  border:1px solid var(--line); padding:.4rem .8rem;
}
.piece__foot{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:1rem; padding-top:1.3rem; border-top:1px solid var(--line); margin-top:1.3rem;
}
.piece__title{ font-size:clamp(1.5rem,3.4vw,2.6rem); }
.piece__desc{ color:var(--grey); margin:.7rem 0 0; max-width:52ch; font-size:.98rem; }
.piece__meta{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
              text-transform:uppercase; color:var(--grey); white-space:nowrap; }

/* alterna a largura para o grid não virar lista monótona */
.piece--wide{ grid-column:1/-1; }
@media (min-width:960px){
  .reel{ grid-template-columns:repeat(2,1fr); }
  .piece--wide .piece__frame{ aspect-ratio:21/9; }
}

/* ---------- serviços ---------- */
.svc-list{ border-top:1px solid var(--line); }
.svc{
  display:grid; grid-template-columns:4.5rem 1fr 1.1fr; gap:clamp(1rem,3vw,3rem);
  padding:2.2rem 0; border-bottom:1px solid var(--line); align-items:start;
  transition:padding-left .4s ease;
}
.svc:hover{ padding-left:1.2rem; }
.svc__n{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; color:var(--grey-dim); padding-top:.5rem; }
.svc__t{ font-size:clamp(1.25rem,2.4vw,1.9rem); }
.svc__d{ color:var(--grey); margin:0; padding-top:.35rem; }
@media (max-width:800px){
  .svc{ grid-template-columns:3rem 1fr; }
  .svc__d{ grid-column:2; }
}

/* ---------- estúdio ---------- */
.split{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }
.split p{ margin:0 0 1.2rem; max-width:56ch; color:var(--grey); }
.split p.lead{ color:var(--white); font-size:1.2rem; }
.facts{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.facts li{ display:flex; justify-content:space-between; gap:1rem; padding:.95rem 0;
           border-bottom:1px solid var(--line); font-family:var(--mono);
           font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; }
.facts b{ font-weight:400; color:var(--grey-dim); }

/* ============================================================
   CONTATO
   ============================================================ */
.form{ display:grid; gap:1.7rem; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.7rem; }
@media (max-width:640px){ .form__row{ grid-template-columns:1fr; } }
.field{ display:grid; gap:.55rem; }
.field label{ font-family:var(--mono); font-size:.64rem; letter-spacing:.18em;
              text-transform:uppercase; color:var(--grey-dim); }
.field input,.field textarea{
  font-family:var(--sans); font-size:1rem; color:var(--white);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:.75rem 0; transition:border-color .25s;
}
.field textarea{ resize:vertical; min-height:118px; line-height:1.6; }
.field input:focus,.field textarea:focus{ outline:0; border-bottom-color:var(--white); }
.field input::placeholder,.field textarea::placeholder{ color:var(--grey-dim); }
.hp{ position:absolute; left:-9999px; opacity:0; }
.form__send{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:500; background:var(--white); color:var(--black); border:1px solid var(--white);
  padding:1rem 2rem; cursor:pointer; width:fit-content;
  transition:background .25s, color .25s;
}
.form__send:hover{ background:transparent; color:var(--white); }
.form__send[disabled]{ opacity:.45; cursor:wait; }
.form__status{ font-family:var(--mono); font-size:.7rem; letter-spacing:.06em;
               line-height:1.6; margin:0; min-height:1.2em; color:var(--grey); }
.form__status[data-state="ok"]{ color:var(--white); }
.form__status[data-state="erro"]{ color:#ff8f6b; }

.direct a{
  display:block; width:fit-content; text-decoration:none;
  font-variation-settings:"wdth" 92,"wght" 500;
  font-size:clamp(1.15rem,2.6vw,1.9rem); letter-spacing:-.01em;
  padding:.25rem 0; overflow-wrap:anywhere; transition:opacity .25s;
}
.direct a:hover{ opacity:.6; }
.social{ display:flex; gap:1.6rem; margin-top:2rem; font-family:var(--mono);
         font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; }
.social a{ color:var(--grey); text-decoration:none; }
.social a:hover{ color:var(--white); }

/* ---------- símbolo replicado ---------- */
.sec--brand{ position:relative; overflow:hidden; }
.ghost-r{
  position:absolute; right:-4%; top:50%; transform:translateY(-50%);
  height:min(78%,540px); width:auto; opacity:.055; pointer-events:none;
  user-select:none; z-index:0;
}
.sec--brand > .wrap{ position:relative; z-index:1; }
@media (max-width:860px){ .ghost-r{ right:-22%; opacity:.04; } }

.foot__mark{ height:26px; width:auto; opacity:.55; }

/* ---------- rodapé ---------- */
.foot{ border-top:1px solid var(--line); padding:3rem 0 3.4rem;
       font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
       text-transform:uppercase; color:var(--grey-dim); }
.foot__in{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gut);
  display:grid; gap:2.2rem;
}
.foot__top{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem;
  justify-content:space-between;
}
.foot__mail{
  font-family:var(--sans); font-variation-settings:"wdth" 92,"wght" 500;
  font-size:clamp(1.15rem,3.2vw,1.9rem); letter-spacing:-.01em;
  text-transform:none; color:var(--white); text-decoration:none;
  overflow-wrap:anywhere; transition:opacity .25s;
}
.foot__mail:hover{ opacity:.6; }
.foot__bottom{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  padding-top:1.6rem; border-top:1px solid var(--line);
}

/* ---------- revelação ---------- */
.rise{ opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1); }
.rise.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .rise{ opacity:1; transform:none; transition:none; }
  .sound.is-on .sound__bars i{ animation:none; height:7px; }
  .status__dot::after{ animation:none; opacity:.35; }
  .piece__frame img,.svc{ transition:none; }
}

/* ============================================================
   PÁGINA DE CONTATO
   ============================================================ */
.page-head{ padding:clamp(9rem,20vh,13rem) 0 clamp(2.5rem,6vh,4rem); position:relative; overflow:hidden; }
.page-head__title{ font-size:clamp(2.6rem,8vw,6.4rem); max-width:14ch; }
.page-head__lede{
  margin:1.8rem 0 0; max-width:44ch; color:var(--grey);
  font-size:clamp(1rem,.95rem + .4vw,1.22rem);
}

.contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2.5rem,6vw,6rem); align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

/* seletor no mesmo padrão dos outros campos */
.field select{
  font-family:var(--sans); font-size:1rem; color:var(--white);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:.75rem 0; cursor:pointer; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--grey) 50%),
                   linear-gradient(135deg,var(--grey) 50%,transparent 50%);
  background-position:right 6px center, right 1px center;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  transition:border-color .25s;
}
.field select:focus{ outline:0; border-bottom-color:var(--white); }
.field select option{ background:var(--surface); color:var(--white); }

/* blocos de informação da coluna lateral */
.info + .info{ margin-top:2.6rem; }
.info__label{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--grey-dim);
  margin:0 0 .9rem; padding-bottom:.7rem; border-bottom:1px solid var(--line);
}
.info p{ margin:0 0 .7rem; color:var(--grey); font-size:.96rem; }
.info ul{ margin:0; padding:0; list-style:none; color:var(--grey); font-size:.96rem; }
.info li{ padding:.35rem 0 .35rem 1.1rem; position:relative; }
.info li::before{ content:""; position:absolute; left:0; top:.95rem; width:5px; height:1px; background:var(--grey-dim); }

/* ============================================================
   COMPACTAÇÃO NO CELULAR
   A página vinha longa demais: espaçamentos pensados para
   telas largas se acumulavam na vertical.
   ============================================================ */
@media (max-width:700px){
  .sec{ padding:3.4rem 0; }
  .hero{ padding-top:6rem; }
  .hero__body{ padding:1.7rem var(--gut) 2.4rem; }
  .hero__meta{ margin-top:1.4rem; }
  .status{ margin-bottom:1.1rem; }
  .hero__kicker{ margin-bottom:1rem; }

  .manifesto{ font-size:clamp(1.4rem,6.4vw,2rem); max-width:none; }
  .manifesto-grid{ gap:1.6rem; }
  .manifesto-side p{ margin-bottom:.8rem; }

  .eyebrow{ margin-bottom:1rem; }
  .h2{ margin-bottom:1.6rem; }

  .reel{ gap:2.4rem; }
  .piece__foot{ padding-top:.9rem; margin-top:.9rem; }
  .piece__desc{ margin-top:.5rem; font-size:.92rem; }

  .svc{ padding:1.4rem 0; }
  .svc__d{ font-size:.92rem; }

  .split{ gap:1.8rem; }
  .split p{ margin-bottom:.8rem; }
  .facts li{ padding:.7rem 0; }

  .form{ gap:1.3rem; }
  .info + .info{ margin-top:1.8rem; }
  .page-head{ padding:7.2rem 0 1.6rem; }

  .foot{ padding:2.2rem 0 2.6rem; }
  .foot__in{ gap:1.5rem; }
  .foot__bottom{ padding-top:1.2rem; gap:.5rem; }
}

/* contador de caracteres */
.form__count{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  color:var(--grey-dim); text-align:right; margin:.4rem 0 0;
}