/* ============================================================
   ADAY LIMA AUDIOVISUAL: landing page
   ------------------------------------------------------------
   Identidade escura e cinematográfica, limpa e direta: claquete
   /slate nos cartões de projeto, tipografia grotesca. Tema único
   e deliberado: não muda com o tema do sistema, como uma peça de
   marca impressa. Cores pintadas explicitamente.
   ============================================================ */

:root{
  --ink:        #131110;
  --ink-soft:   #1c1915;
  --ink-raise:  #221e19;
  --line:       rgba(239,233,222,0.14);
  --line-soft:  rgba(239,233,222,0.08);
  --paper:      #efe9de;
  --paper-dim:  #a89f8f;
  --paper-faint:#726b5f;
  --accent:     #ff5a33;
  --accent-soft:rgba(255,90,51,0.16);
  --logo-ink:   #575148;   /* cor dos logos da faixa de marcas */

  --display: "Space Grotesk", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:  "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --fs-hero: clamp(2.6rem, 8.2vw, 7.2rem);
  --fs-h2:   clamp(2rem, 4.6vw, 3.6rem);
  --fs-h3:   clamp(1.15rem, 1.6vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1.7vw, 1.3rem);

  --wrap: 1280px;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --ease: cubic-bezier(.16,.84,.32,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; } /* rolagem fluida é feita pela Lenis (script.js); nativa fica só de reserva */
html.lenis, html.lenis body{ height: auto; }
html.lenis-smooth{ scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: default;
}

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

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
button{ font: inherit; color: inherit; background:none; border:none; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
h1,h2,h3{ font-family: var(--display); font-weight: 600; text-wrap: balance; }

:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap{ max-width: var(--wrap); margin-inline:auto; padding-inline: var(--pad); }
.eyebrow{
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
  display:flex; align-items:center; gap:.6em;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--accent); flex:none; }

.eyebrow-live{
  display:inline-flex; width:max-content;
  background: rgba(255,90,51,.08);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .55em 1.15em;
}
/* largura acompanha o texto (cresce e encolhe letra a letra);
   só a altura fica travada, pra pílula não pular quando o texto zera */
.eyebrow-live .typewriter{ display:inline-block; min-height: 1.6em; line-height: 1.6; }
.eyebrow-live .caret{
  display:inline-block; width:1px; height:1em; margin-left:.2em;
  background: var(--accent); vertical-align: -0.15em;
  animation: caret-blink 0.9s step-end infinite;
}
@keyframes caret-blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .eyebrow-live .caret{ animation:none; } }

/* ---------------- grain overlay ---------------- */
.grain{
  position: fixed; inset: -60px;
  z-index: 90;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.7s steps(4) infinite;
}
@keyframes grain-shift{
  0%{ transform: translate(0,0); }
  25%{ transform: translate(-2%,-3%); }
  50%{ transform: translate(1%,2%); }
  75%{ transform: translate(-1%,1%); }
  100%{ transform: translate(0,0); }
}

/* ---------------- preloader ---------------- */
.preloader{
  position: fixed; inset:0; z-index: 300;
  background: var(--ink);
  display:flex; align-items:center; justify-content:center;
  clip-path: circle(150% at 50% 50%);
  transition: clip-path 1.1s var(--ease) .35s;
}
body.loaded .preloader{ clip-path: circle(0% at 50% 50%); pointer-events:none; }
.preloader-mark{ width: clamp(120px,20vw,180px); opacity:0; animation: fade-in .8s var(--ease) .15s forwards; }
.preloader-mark img{ width:100%; }
@keyframes fade-in{ to{ opacity:1; } }

/* ---------------- header: nasce full-bleed e encolhe numa pílula glass ao rolar ---------------- */
.navwrap{
  position: fixed; top: 0; left:0; right:0; z-index: 100;
  display:flex; justify-content:center;
  padding-inline: var(--pad);
  pointer-events:none;
  transition: top .6s var(--ease), padding-inline .6s var(--ease);
}
.navwrap.shrink{
  top: 1.3rem;
  padding-inline: clamp(1rem, 13vw, 240px);
}
header{
  pointer-events:auto;
  width:100%; max-width: 1320px;
  display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap: 2rem;
  background: rgba(19,17,16,0);
  backdrop-filter: blur(0px) saturate(1);
  -webkit-backdrop-filter: blur(0px) saturate(1);
  border-radius: 0px;
  padding: 1.2rem 0;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: background .6s var(--ease), box-shadow .6s var(--ease), padding .6s var(--ease), border-radius .6s var(--ease), backdrop-filter .6s var(--ease);
}
header.solid{
  background: rgba(19,17,16,0.55);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-radius: 14px;
  padding: 1rem 1rem 1rem 1.7rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.logo{ display:flex; align-items:center; gap:.6em; }
.logo img{ height: 24px; width:auto; display:block; }
.logo-word{ font-family: var(--display); font-size: 1.05rem; letter-spacing:.01em; }
.logo em{ color: var(--accent); font-style:normal; }
.nav-links{ display:flex; align-items:center; justify-content:center; gap:2.1rem; }
.nav-links a{ font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; position:relative; padding-block:.2rem; transition: color .25s; }
.nav-links a:hover{ color: var(--accent); }
@media (max-width: 780px){ .nav-links{ display:none; } }
header .btn-solid{ padding: .68em 1.3em; font-size:.72rem; }

.header-actions{ display:flex; align-items:center; gap:.85rem; justify-self:end; }
.nav-toggle{
  display:none; flex:none; width:36px; height:36px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--paper); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 780px){
  .nav-toggle{ display:flex; }
  header #navWhats{ display:none; }
}
@media (max-width: 480px){
  .navwrap{ padding-inline: var(--pad); top:0; }
  .navwrap.shrink{ padding-inline: .75rem; top: .9rem; }
  header{ padding: 1rem 0; }
  header.solid{ padding: .5rem .5rem .5rem 1rem; gap:1rem; }
  header .btn-solid{ padding: .6em .9em; font-size:.66rem; gap:.35em; }
}

/* ---------------- menu mobile em tela cheia ---------------- */
.mobile-menu{
  position: fixed; inset:0; z-index:95; background: var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.5rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .4s var(--ease), visibility 0s linear .4s;
}
.mobile-menu.open{ opacity:1; visibility:visible; pointer-events:auto; transition: opacity .4s var(--ease); }
.mobile-menu nav{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
.mobile-menu nav a{ font-family:var(--display); font-size:1.7rem; font-weight:600; letter-spacing:-.01em; }
.mobile-menu nav a:hover{ color:var(--accent); }
@media (min-width: 781px){ .mobile-menu{ display:none; } }

.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding: .85em 1.5em;
  border-radius: 10px;
  border:1px solid var(--paper);
  transition: transform .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn-solid{ background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-solid:hover{ background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn-ghost{ color:var(--paper); }
.btn-ghost:hover{ background: var(--paper); color: var(--ink); }
.btn svg{ width:14px; height:14px; flex:none; }
.btn-lg{ padding: 1.1em 2.1em; font-size:.86rem; }

/* ---------------- hero: bloco de texto + trilha de mídia, fundo preto ---------------- */
.hero{
  position:relative;
  background: var(--ink);
  padding-top: 7.5rem; padding-bottom: 4rem;
  overflow:hidden;
}
.hero-info{ position:relative; z-index:2; }
.hero-inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.hero h1{
  font-size: var(--fs-hero); line-height: 0.98; letter-spacing:-0.01em;
  margin-top: 1.3rem;
}
.hero h1 .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero h1 em{ font-style:normal; color: var(--accent); }
.hero h1 em.plain{ color: var(--paper); }
.hero h1 .ch{
  display:inline-block;
  opacity:0;
  transform: translateY(0.7em) rotate(4deg);
  animation: letter-up .7s var(--ease) forwards;
  animation-delay: calc(var(--i) * 26ms + .5s);
}
@keyframes letter-up{ to{ opacity:1; transform:none; } }

.hero-lead{ max-width: 46ch; font-size: var(--fs-lead); color: var(--paper-dim); margin: 1.6rem auto 0; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top: 2.2rem; }

/* ---------------- trilha de mídia: imagens/vídeos em loop, de ponta a ponta ---------------- */
.hero-media{
  position:relative; z-index:1;
  margin-top: 3.75rem;
  overflow:hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.hero-media-track{
  display:flex; gap: 1rem; width:max-content;
  animation: scroll-left 48s linear infinite;
}
.hero-media:hover .hero-media-track{ animation-play-state: paused; }
.media-tile{
  position:relative; flex:none; overflow:hidden; border-radius:2px;
  width: clamp(220px, 20vw, 320px); height: clamp(150px, 13vw, 210px);
}
.media-tile img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: saturate(.95); transition: transform .7s var(--ease);
}
.media-tile:hover img{ transform: scale(1.06); }
.media-play{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  background: rgba(11,10,9,.25);
}
.media-play svg{ width:34px; height:34px; fill:var(--paper); filter: drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
@media (max-width:640px){
  .hero{ padding-top: 6.5rem; }
  .media-tile{ width: clamp(160px,52vw,240px); height: clamp(110px,36vw,168px); }
}

/* ---------------- generic section ---------------- */
section{ position:relative; padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.section-head{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1.5rem 2.5rem;
  margin-bottom: clamp(1.75rem,3.5vw,2.75rem);
}
.section-head h2{ font-size: var(--fs-h2); max-width: 18ch; }
.section-head .eyebrow{ margin-bottom: .9rem; }
.section-note{ max-width: 32ch; color: var(--paper-dim); font-size:.95rem; }

[data-reveal]{ opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.1s; }
[data-reveal-delay="2"]{ transition-delay:.2s; }
[data-reveal-delay="3"]{ transition-delay:.3s; }

/* ---------------- about / bio ---------------- */
.about{ background: var(--ink-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.about-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.5rem,4vw,3.5rem); align-items:center; }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } }
.frame{ position:relative; aspect-ratio: 4/5; border-radius:2px; overflow:hidden; border:1px solid var(--line); }
.frame img{ width:100%; height:100%; object-fit:cover; }
.frame::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(200deg, transparent 55%, rgba(10,9,8,.75) 100%);
}
.frame-tag{
  position:absolute; left:.9rem; bottom:.9rem; z-index:2; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.14em; color: var(--paper); text-transform:uppercase;
  display:flex; gap:.5em;
}
.frame-corner{ position:absolute; width:14px; height:14px; z-index:2; }
.frame-corner.tl{ top:.7rem; left:.7rem; border-top:1px solid var(--paper); border-left:1px solid var(--paper); }
.frame-corner.br{ bottom:.7rem; right:.7rem; border-bottom:1px solid var(--paper); border-right:1px solid var(--paper); }

.about-copy p{ color: var(--paper-dim); font-size: 1.02rem; }
.about-copy p + p{ margin-top:1rem; }
.about-copy .lead{ font-family:var(--display); font-size: clamp(1.25rem,2.2vw,1.55rem); color:var(--paper); font-weight:600; margin-bottom:1.2rem; }

.stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.5rem; margin-top: 1.8rem; padding-top:1.4rem; border-top:1px solid var(--line); }
@media (max-width:520px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat b{ font-family:var(--display); font-size: clamp(1.9rem,3.4vw,2.6rem); font-weight:600; display:block; }
.stat b em{ color:var(--accent); font-style:normal; }
.stat span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-faint); }

/* ---------------- faixa de logos ---------------- */
/* barra de logos: compacta, sem o respiro de uma seção de conteúdo */
.brands{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block: clamp(1.1rem, 2.2vw, 1.8rem); }
.marquee-strip{ overflow:hidden; white-space:nowrap; padding-block: 1.6rem; }
.marquee-track{ display:inline-flex; align-items:center; gap: 4.5rem; animation: scroll-left 42s linear infinite; }
.marquee-strip:hover .marquee-track{ animation-play-state: paused; }
@keyframes scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* logos embutidos como sprite: pintam com currentColor, então funcionam
   igual abrindo o arquivo direto do disco (file://) ou por servidor */
.logo-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.logo-mark{
  flex:none;
  height:54px; width:auto; max-width:222px;
  color: var(--logo-ink);
  transition: color .35s var(--ease);
}
.logo-mark:hover{ color: var(--paper-dim); }
/* selos quase quadrados precisam de mais altura pra ter o mesmo peso das logotipias */
.logo-mark--selo{ height:72px; }

/* marca ainda sem logo: entra como texto, com o mesmo peso visual dos demais */
.logo-mark--texto{
  width:auto; display:inline-flex; flex-direction:column; justify-content:center;
  font-family: var(--display); font-weight:700;
  font-size:1.55rem; line-height:1.05; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap;
}
.logo-mark--texto em{
  font-family: var(--mono); font-style:normal; font-weight:400;
  font-size:.5rem; letter-spacing:.24em; margin-top:.35em; opacity:.8;
}
@media (max-width:560px){ .logo-mark--texto{ font-size:1.25rem; } }
@media (max-width:560px){ .logo-mark{ height:44px; max-width:170px; } .logo-mark--selo{ height:58px; } .marquee-track{ gap:3rem; } }

/* ---------------- services (tipos de projeto) ---------------- */
.services-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background: var(--line); border:1px solid var(--line); }
@media (max-width:900px){ .services-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .services-grid{ grid-template-columns: 1fr; } }
.service{
  background: var(--ink); padding: 2rem 1.9rem;
  display:flex; align-items:flex-start; gap:1.15rem;
  transition: background .4s;
}
.service:hover{ background: var(--ink-raise); }
.service-text{ display:flex; flex-direction:column; gap:.55rem; }
.service h3{ font-size: var(--fs-h3); }
.service p{ color:var(--paper-dim); font-size:.9rem; max-width:34ch; }

/* ícone do serviço: traço laranja, alinhado à altura do título */
.service-icon{
  flex:none; width:28px; height:28px; margin-top:.15em;
  color: var(--accent);
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  transition: transform .4s var(--ease);
}
.service:hover .service-icon{ transform: translateY(-2px); }
@media (max-width:560px){ .service{ gap:1rem; } .service-icon{ width:25px; height:25px; } }

/* ---------------- equipamento (ficha técnica) ---------------- */
.gear{ background: var(--ink-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.gear-grid{
  display:grid; grid-template-columns: 1.35fr 1fr; gap:1px;
  background: var(--line); border:1px solid var(--line);
}
@media (max-width:700px){ .gear-grid{ grid-template-columns:1fr; } }
.gear-col{ background: var(--ink); padding: 1.9rem 1.7rem; }
.gear-col h3{
  font-family: var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color: var(--paper-faint);
  margin-bottom:1.2rem;
}
.gear-col ul{ list-style:none; display:flex; flex-direction:column; gap:.85rem; }
.gear-col li{
  display:grid; grid-template-columns: 116px 1fr; gap:1rem; align-items:baseline;
  font-family: var(--mono); font-size:.84rem; line-height:1.45; color: var(--paper);
  padding-bottom:.85rem; border-bottom:1px solid var(--line);
}
.gear-col li:last-child{ padding-bottom:0; border-bottom:none; }
.gear-col li span{ font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color: var(--accent); }
@media (max-width:480px){
  .gear-col li{ grid-template-columns:1fr; gap:.25rem; }
}

/* ---------------- portfolio / gallery ---------------- */
.filters{ display:flex; gap:.6rem; flex-wrap:wrap; }
.filter{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.55em 1.1em; border:1px solid var(--line); border-radius:8px; color:var(--paper-dim);
  transition: all .3s;
}
.filter.active, .filter:hover{ border-color: var(--accent); color: var(--paper); background: var(--accent-soft); }

.grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1.1rem; margin-top: 2rem; }
@media (max-width:900px){ .grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .grid{ grid-template-columns: 1fr; } }

.tile{ position:relative; overflow:hidden; border-radius:2px; border:1px solid var(--line); transition: opacity .4s, transform .4s; }
.tile.hide{ display:none; }

.tile-media{ aspect-ratio: 4/5; position:relative; overflow:hidden; background: var(--ink-soft); cursor: pointer; }
.tile-media img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.tile:hover .tile-media img{ transform: scale(1.06); }

.tile-expand{
  position:absolute; top:.7rem; right:.7rem; z-index:3; width:30px; height:30px; border-radius:50%;
  background: rgba(10,9,8,.55); border:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform: scale(.85); transition: opacity .3s, transform .3s, background .3s;
}
.tile:hover .tile-expand{ opacity:1; transform:none; }
.tile-expand svg{ width:13px; height:13px; }

/* sem legenda nas fotos: o grid é só imagem, o filtro é quem organiza */
/* bolinhas do carrossel no lightbox */
.lightbox-dots{ display:flex; justify-content:center; flex-wrap:wrap; gap:.45rem; margin-top:.9rem; }
.lb-dot{
  width:7px; height:7px; padding:0; border-radius:50%;
  background:rgba(239,233,222,.28); transition: background .25s, transform .25s;
}
.lb-dot.on{ background:var(--accent); transform:scale(1.25); }
.lb-dot:hover{ background:rgba(239,233,222,.6); }
.lightbox-nav[hidden]{ display:none !important; }
.tile-cat{ font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }

.grid-more{ display:flex; justify-content:center; margin-top: 2rem; }
.grid-more.hide{ display:none; }

/* ---------------- lightbox ---------------- */
.lightbox{
  position: fixed; inset:0; z-index:250; background: rgba(9,8,7,.96);
  display:flex; align-items:center; justify-content:center; padding: clamp(1.2rem,5vw,4rem);
  opacity:0; pointer-events:none; transition: opacity .35s var(--ease);
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox-figure{
  position:relative; display:flex; flex-direction:column; align-items:center;
  max-width: min(1100px,92vw); max-height: 92vh;
}
/* a imagem cede espaço pra legenda e bolinhas caberem sempre na tela */
.lightbox-figure img{
  max-width: min(1100px,92vw); max-height: calc(92vh - 5.5rem);
  width:auto; height:auto; border:1px solid var(--line); object-fit:contain;
}
.lightbox-cap{ margin-top:.9rem; width:100%; display:flex; justify-content:space-between; gap:1rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--paper-dim); }
.lightbox-cap b{ font-family:var(--display); font-weight:600; font-size:.95rem; letter-spacing:0; text-transform:none; color:var(--paper); display:block; margin-bottom:.2rem; }
.lightbox-close, .lightbox-nav{
  position:absolute; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line-soft); background: rgba(19,17,16,.7);
  display:flex; align-items:center; justify-content:center; transition: background .3s, border-color .3s;
}
.lightbox-close:hover, .lightbox-nav:hover{ background: var(--accent); border-color: var(--accent); }
.lightbox-close{ top: clamp(.8rem,3vw,1.6rem); right: clamp(.8rem,3vw,1.6rem); }
.lightbox-nav.prev{ left: clamp(.4rem,2vw,1.2rem); top:50%; transform:translateY(-50%); }
.lightbox-nav.next{ right: clamp(.4rem,2vw,1.2rem); top:50%; transform:translateY(-50%); }
.lightbox-nav svg, .lightbox-close svg{ width:16px; height:16px; }
@media (max-width:700px){ .lightbox-nav{ display:none; } }

/* ---------------- reel ---------------- */
.reel{ background: var(--ink-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.reel-frame{
  position:relative; margin-inline:auto;
  width:min(360px, 78vw);            /* captação vertical: player estreito e centralizado */
  border-radius:3px; overflow:hidden; border:1px solid var(--line);
  background: var(--ink);
}
.reel-frame video{ display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; background:var(--ink); }
@media (max-width:700px){ .reel-frame{ width:min(300px, 86vw); } }
.reel-caption{ position:absolute; left: .9rem; top: .9rem; bottom:auto; z-index:2; pointer-events:none; text-shadow:0 1px 6px rgba(0,0,0,.6); z-index:2; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; color:var(--paper-dim); text-transform:uppercase; }
.reel-caption b{ color:var(--paper); }
.reel-note{ margin-top:1.4rem; font-size:.85rem; color:var(--paper-faint); max-width:56ch; }

/* ---------------- contact ---------------- */
.contact{ text-align:center; padding-block: clamp(3.5rem,7vw,6rem); }
.contact h2{ font-size: clamp(2.2rem,7vw,5.2rem); max-width:16ch; margin-inline:auto; line-height:1.02; }
.contact h2 em{ color:var(--accent); font-style:normal; }
.contact-sub{ max-width:44ch; margin: 1.4rem auto 2rem; color: var(--paper-dim); font-size: var(--fs-lead); }
.contact-actions{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
.contact-links{ margin-top: 2.2rem; display:flex; justify-content:center; gap: 2rem; flex-wrap:wrap; }
.contact-links a{ font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-dim); border-bottom:1px solid transparent; transition: color .3s, border-color .3s; }
.contact-links a:hover{ color:var(--paper); border-color:var(--accent); }

/* ---------------- footer ---------------- */
footer{ border-top:1px solid var(--line); padding-block: 1.8rem; }
.foot-row{ display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center; }
.foot-row .logo{ font-size:1rem; }
.foot-nav{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.foot-nav a{ font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--paper-dim); }
.foot-nav a:hover{ color:var(--paper); }
.foot-small{ font-family:var(--mono); font-size:.66rem; color:var(--paper-faint); }

/* whatsapp floating (mobile-friendly persistent CTA) */
.wa-float{
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 110;
  width:52px; height:52px; border-radius:50%;
  background: var(--paper); border:1px solid var(--paper);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .35s var(--ease), background .3s;
}
.wa-float:hover{ transform: scale(1.08); background: var(--accent); }
.wa-float svg{ width:24px; height:24px; fill: var(--ink); }
@media (min-width: 861px){ .wa-float{ display:none; } }

/* ============================================================
   INSPIRADO EM MAGICUI: glow de fundo, spotlight nos cards,
   border-beam, shimmer e contadores animados. Mesma estrutura,
   mesma ordem, camada visual mais rica por cima.
   ============================================================ */

/* ---- fundo com grade de pontos + glow (about / serviços / contato) ---- */
.about .wrap, #servicos .wrap, .contact .wrap{ position:relative; }
.section-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.section-bg .bg-dots{
  position:absolute; inset:-1px;
  background-image: radial-gradient(var(--line-soft) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 40%, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 40%, transparent 85%);
  opacity:.7;
}
.section-bg .bg-glow{
  position:absolute; width: min(640px,60vw); height: min(640px,60vw); border-radius:50%;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  filter: blur(70px);
  opacity:.4;
  animation: bg-glow-float 16s ease-in-out infinite;
}
.about .section-bg .bg-glow{ top:-16%; right:-12%; }
#servicos .section-bg .bg-glow{ bottom:-22%; left:-14%; animation-delay:-5s; }
.contact .section-bg .bg-glow{ top:-42%; left:50%; transform:translateX(-50%); opacity:.3; animation-delay:-10s; }
@keyframes bg-glow-float{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(3%,4%) scale(1.08); }
}
.contact .section-bg .bg-glow{ animation-name: bg-glow-float-center; }
@keyframes bg-glow-float-center{
  0%,100%{ transform: translateX(-50%) translateY(0) scale(1); }
  50%{ transform: translateX(-50%) translateY(3%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce){ .section-bg .bg-glow{ animation:none; } }

/* ---- magic card: spotlight que segue o cursor ---- */
.tile, .service, .frame{ --mx:50%; --my:50%; }
.service{ position:relative; overflow:hidden; }
.tile::before, .service::before, .frame::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(360px circle at var(--mx) var(--my), var(--accent-soft), transparent 68%);
  opacity:0; transition: opacity .45s var(--ease);
}
.tile:hover::before, .service:hover::before, .frame:hover::before{ opacity:1; }
.tile-media, .tile-expand{ position:relative; z-index:2; }
.service > *{ position:relative; z-index:2; }

/* ---- border beam: luz percorrendo a borda ---- */
@property --beam-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.beam{ position:relative; }
.beam::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:3; pointer-events:none;
  padding:1px;
  background: conic-gradient(from var(--beam-angle), transparent 0deg, transparent 300deg, var(--accent) 330deg, var(--paper) 345deg, var(--accent) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: beam-spin 4.5s linear infinite;
}
@keyframes beam-spin{ to{ --beam-angle: 360deg; } }
.frame.beam::after{ padding:1.5px; }
@media (prefers-reduced-motion: reduce){ .beam::after{ animation:none; } }

/* ---- shimmer: brilho que atravessa os CTAs principais ---- */
.btn-lg.btn-solid{ position:relative; overflow:hidden; }
.btn-lg.btn-solid::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(115deg, transparent 40%, rgba(19,17,16,.32) 50%, transparent 60%);
  transform: translateX(-140%);
  animation: shimmer-sweep 5s ease-in-out infinite;
}
.btn-lg.btn-solid > *{ position:relative; z-index:2; }
@keyframes shimmer-sweep{
  0%{ transform: translateX(-140%); }
  14%{ transform: translateX(140%); }
  100%{ transform: translateX(140%); }
}
@media (prefers-reduced-motion: reduce){ .btn-lg.btn-solid::before{ animation:none; } }

/* ---- marquee: fade nas bordas, estilo MagicUI ---- */
.marquee-strip{
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

/* ---- number ticker: contagem animada dos números da bio ---- */
.stat b{ font-variant-numeric: tabular-nums; }
.stat b .ticker{ display:inline-block; font-size:inherit; color:inherit; font-weight:inherit; font-family:inherit; }