/* ==========================================================
   Selah Records — site
   Paleta e tipo seguem o guia de identidade (Selah/Identidade)
   ========================================================== */
:root{
  --azul:#1C3F94;
  --noite:#0B1D45;
  --ceu:#A9C1EC;
  --branco:#F4F1EA;
  --laranja:#E8662A;
  --linha:rgba(28,63,148,.22);
  --texto:#1C3F94;
  --suave:rgba(28,63,148,.62);
  --gutter:clamp(16px,3.2vw,48px);
  --fonte:"Helvetica Neue",Helvetica,Inter,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--branco);color:var(--texto);font-family:var(--fonte);font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.4}
img,video{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--azul);color:var(--branco)}
small{font-size:11px;letter-spacing:.02em;font-weight:500}

/* ---------- luz (fundo desfocado + grão) ---------- */
.luz{position:relative;overflow:hidden;isolation:isolate}
.luz__blob{position:absolute;border-radius:50%;filter:blur(90px);z-index:-2;will-change:transform}
.grao{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
.luz--claro{background:var(--branco)}
.luz--claro .b1{width:46vw;height:70vh;left:27vw;top:12vh;background:var(--ceu);opacity:.85;animation:deriva 22s var(--ease) infinite alternate}
.luz--claro .b2{width:30vw;height:40vh;left:38vw;top:52vh;background:var(--azul);opacity:.32;animation:deriva 28s var(--ease) infinite alternate-reverse}
.luz--claro .b3{width:22vw;height:26vh;left:62vw;top:8vh;background:#C9D6F2;opacity:.6;animation:deriva 34s var(--ease) infinite alternate}
.luz--azul{background:var(--azul)}
.luz--azul .b1{width:60vw;height:70%;left:-10vw;top:30%;background:var(--noite);opacity:.9;animation:deriva 26s var(--ease) infinite alternate}
.luz--azul .b2{width:45vw;height:60%;left:55vw;top:-10%;background:var(--ceu);opacity:.55;animation:deriva 30s var(--ease) infinite alternate-reverse}
.luz--azul .b3{width:22vw;height:30%;left:62vw;top:62%;background:var(--laranja);opacity:.35;animation:deriva 36s var(--ease) infinite alternate}
.luz--noite{background:var(--noite)}
.luz--noite .b1{width:60vw;height:80%;left:-12vw;top:-20%;background:var(--azul);opacity:.9}
.luz--noite .b2{width:30vw;height:50%;left:64vw;top:55%;background:var(--laranja);opacity:.45}
@keyframes deriva{to{transform:translate3d(4vw,-3vh,0) scale(1.08)}}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:18px var(--gutter);transition:background .5s var(--ease),backdrop-filter .5s}
.top.is-solid{background:rgba(244,241,234,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.top__logo{width:84px;display:block;position:relative}
.top__logo img{height:auto}
.logo-branco{position:absolute;inset:0;opacity:0;transition:opacity .4s}
.top.is-dark .logo-branco{opacity:1}.top.is-dark .logo-azul{opacity:0}
.top.is-dark{color:var(--branco)}
.top__meta{display:flex;gap:18px;font-size:11px;font-weight:500;letter-spacing:.04em}
.top__nav{justify-self:end;display:flex;gap:28px;font-size:13px;font-weight:500}
.top__nav a{position:relative}
.top__nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.top__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.top__menu{display:none;justify-self:end;font-size:13px;font-weight:500}

.menu{position:fixed;inset:0;z-index:40;background:var(--branco);padding:110px var(--gutter) 32px;display:flex;flex-direction:column;justify-content:space-between}
.menu[hidden]{display:none}
.menu nav{display:flex;flex-direction:column;gap:6px}
.menu nav a{font-size:clamp(44px,12vw,72px);font-weight:500;letter-spacing:-.045em;line-height:1.02;display:flex;align-items:flex-start;gap:12px}
.menu nav small{margin-top:.6em;color:var(--suave)}
.menu__foot{font-size:13px;font-weight:500;color:var(--laranja)}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:120px var(--gutter) 40px}
.hero__corner{position:absolute;top:96px;font-size:11px;font-weight:500;line-height:1.2;letter-spacing:.03em}
.hero__corner--l{left:var(--gutter)}
.hero__corner--r{right:var(--gutter);text-align:right}
.hero__mark{position:relative;width:clamp(260px,56vw,860px);margin-top:-4vh}
.hero__logo img{height:auto}
.hero__records{font-size:calc(clamp(260px,56vw,860px)*.078);letter-spacing:.11em;font-weight:500;margin-top:.32em;padding-left:.4%;line-height:1}
.gl{position:absolute;background:var(--linha);pointer-events:none}
.gl--v{width:1px;top:-100vh;bottom:-100vh}
.gl--h{height:1px;left:-100vw;right:-100vw}
.gl--l{left:.4%}.gl--r{left:89%}
/* cap height / baseline do SVG: 3.4% e 96.1% da altura do logo (h = 29.3% da largura) */
.gl--t{top:calc(clamp(260px,56vw,860px)*.293*.03)}
.gl--b{top:calc(clamp(260px,56vw,860px)*.293*.962)}
.hero__mark .gl{transform-origin:center;animation:linha 1.6s var(--ease) both .3s}
.gl--v{animation-name:linhaV!important}
@keyframes linha{from{transform:scaleX(0)}}
@keyframes linhaV{from{transform:scaleY(0)}}
.hero__logo{animation:surge 1.4s var(--ease) both .15s}
.hero__records{animation:surge 1.4s var(--ease) both .45s}
@keyframes surge{from{opacity:0;transform:translateY(14px);filter:blur(8px)}}
.hero__bottom{position:absolute;left:var(--gutter);right:var(--gutter);bottom:28px;display:flex;justify-content:space-between;align-items:flex-end;font-size:13px;font-weight:500}
.hero__reel span{color:var(--suave)}
.hero__reel:hover{color:var(--laranja)}

/* ---------- mídia (placeholder até entrar a imagem) ---------- */
.midia{position:relative;overflow:hidden;border-radius:4px;background:
  radial-gradient(60% 70% at 35% 40%,rgba(169,193,236,.95),transparent 70%),
  radial-gradient(40% 45% at 70% 75%,rgba(28,63,148,.35),transparent 70%),
  #E9E6DF}
.midia::before{content:"";position:absolute;inset:0;opacity:.25;mix-blend-mode:overlay;background-image:inherit;pointer-events:none}
.midia::after{content:attr(data-label);position:absolute;left:14px;top:12px;font-size:10px;font-weight:500;letter-spacing:.06em;color:var(--azul);opacity:.75}
.midia.tem-midia::after{display:none}
.midia img,.midia video{position:absolute;inset:0;transition:transform 1.4s var(--ease)}
.midia--16x9{aspect-ratio:16/9}
.midia--4x3{aspect-ratio:4/3}
.reel .midia{max-width:min(100%,calc((100svh - 140px)*4/3));margin-inline:auto}
.midia--4x5{aspect-ratio:4/5}

/* ---------- seções ---------- */
section{position:relative}
.secao__head{display:flex;gap:18px;font-size:11px;font-weight:500;letter-spacing:.06em;padding-bottom:14px;border-bottom:1px solid var(--linha);margin-bottom:clamp(36px,6vw,80px)}
.secao__head--claro{border-color:rgba(244,241,234,.3);color:var(--branco)}
.secao__nota{margin-left:auto;color:var(--suave)}
.titulo{font-size:clamp(40px,7vw,104px);font-weight:500;letter-spacing:-.045em;line-height:.98;margin-bottom:clamp(32px,5vw,64px)}
.titulo--claro{color:var(--branco)}

.reel{padding:clamp(24px,4vw,48px) var(--gutter) clamp(80px,10vw,160px)}
.reel__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:99px;background:rgba(244,241,234,.86);backdrop-filter:blur(8px);font-size:13px;font-weight:500;color:var(--azul);transition:background .3s,color .3s}
.reel__play:hover{background:var(--laranja);color:var(--branco)}
.reel.is-playing .reel__play{opacity:0;pointer-events:none}

.sobre{padding:0 var(--gutter) clamp(100px,12vw,180px)}
.manifesto{font-size:clamp(26px,3.6vw,54px);font-weight:400;letter-spacing:-.025em;line-height:1.12;max-width:20ch;max-width:min(1100px,92%)}
.manifesto em{font-style:normal;color:var(--laranja)}
.manifesto--2{margin-top:.8em;margin-left:auto;max-width:min(860px,80%);font-size:clamp(20px,2.3vw,34px);color:var(--suave)}
.sobre__fotos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,28px);margin-top:clamp(56px,8vw,120px);max-width:980px}
.midia--desce{margin-top:18%}

.filmes{padding:0 var(--gutter) clamp(100px,12vw,180px)}
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px);row-gap:clamp(32px,4vw,56px)}
.card--largo{grid-column:span 2}
.card .midia{transition:border-radius .6s var(--ease)}
.card:hover img{transform:scale(1.04)}
.card:hover .midia{border-radius:14px}
.card__info{display:flex;justify-content:space-between;gap:12px;padding-top:12px;font-size:13px;font-weight:500}
.card__info span:last-child{color:var(--suave);font-weight:400}

.faixa{overflow:hidden;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);padding:22px 0;margin-bottom:clamp(100px,12vw,180px)}
.faixa__trilho{display:flex;gap:.5em;width:max-content;font-size:clamp(40px,6vw,88px);font-weight:500;letter-spacing:-.045em;line-height:1;animation:faixa 48s linear infinite}
.faixa i{font-style:normal;color:var(--laranja)}
@keyframes faixa{to{transform:translateX(-50%)}}

.fazemos{padding:0 var(--gutter) clamp(100px,12vw,180px)}
.lista{list-style:none}
.lista li{display:grid;grid-template-columns:70px 1fr 1fr;align-items:baseline;gap:16px;padding:22px 0;border-bottom:1px solid var(--linha);transition:padding .5s var(--ease),color .3s}
.lista .n{font-size:11px;font-weight:500;color:var(--suave)}
.lista .t{font-size:clamp(30px,4.2vw,64px);font-weight:500;letter-spacing:-.045em;line-height:1}
.lista .d{font-size:15px;color:var(--suave);max-width:34ch}
.lista li:hover{padding-left:14px}
.lista li:hover .t{color:var(--laranja)}

.processo{padding:clamp(90px,11vw,170px) var(--gutter)}
.processo__in{position:relative}
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,32px);color:var(--branco)}
.passo{border-top:1px solid rgba(244,241,234,.35);padding-top:18px}
.passo span{font-size:11px;font-weight:500;opacity:.7}
.passo h3{font-size:clamp(22px,2.2vw,32px);font-weight:500;letter-spacing:-.03em;margin:28px 0 10px}
.passo p{font-size:15px;opacity:.82;max-width:30ch}

.contato{padding:clamp(100px,12vw,180px) var(--gutter)}
.contato__titulo{font-size:clamp(44px,8.4vw,128px);font-weight:500;letter-spacing:-.05em;line-height:.95;margin-bottom:clamp(40px,6vw,80px)}
.opcoes{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:1100px}
.opcao{display:flex;align-items:center;gap:18px;padding:22px 24px;border:1px solid var(--linha);border-radius:999px;font-size:clamp(15px,1.3vw,18px);font-weight:500;transition:background .4s var(--ease),color .4s,border-color .4s}
.opcao span:first-child{font-size:11px;color:var(--suave);transition:color .4s}
.opcao b{margin-left:auto;font-weight:400;transition:transform .4s var(--ease)}
.opcao:hover{background:var(--azul);color:var(--branco);border-color:var(--azul)}
.opcao:hover span:first-child{color:var(--ceu)}
.opcao:hover b{transform:translateX(6px)}

.rodape{color:var(--branco);padding:clamp(70px,8vw,120px) var(--gutter) 24px}
.rodape__in{position:relative}
.rodape__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;font-size:15px}
.rodape__cols div{display:flex;flex-direction:column;gap:6px}
.rodape__cols small{opacity:.6;margin-bottom:8px}
.rodape__cols a:hover{color:var(--laranja)}
.rodape__marca{margin:clamp(70px,10vw,150px) 0 18px}
.rodape__marca img{height:auto;width:100%}
.rodape__marca span{display:block;font-size:calc((100vw - 2*var(--gutter))*.078);line-height:1;letter-spacing:.11em;font-weight:500;margin-top:.4em}
.rodape__base{display:flex;justify-content:space-between;font-size:12px;opacity:.75;padding-top:16px;border-top:1px solid rgba(244,241,234,.25)}

/* ---------- revelar ao rolar ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .top{grid-template-columns:1fr auto}
  .top__meta,.top__nav{display:none}
  .top__menu{display:block}
  .grade{grid-template-columns:1fr 1fr}
  .card--largo{grid-column:span 2}
  .passos{grid-template-columns:1fr 1fr;row-gap:40px}
  .lista li{grid-template-columns:44px 1fr}
  .lista .d{grid-column:2}
  .opcoes{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hero__mark{width:78vw}
  .gl--t{top:calc(78vw*.293*.03)}.gl--b{top:calc(78vw*.293*.962)}
  .hero__records{font-size:calc(78vw*.078)}
  .grade{grid-template-columns:1fr}
  .card--largo{grid-column:auto}
  .passos{grid-template-columns:1fr}
  .rodape__cols{grid-template-columns:1fr 1fr}
  .opcao{padding:18px 20px}
  .luz__blob{filter:blur(60px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- formulário de contato ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--linha);border-left:1px solid var(--linha);max-width:1280px}
.campo{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px;border-right:1px solid var(--linha);border-bottom:1px solid var(--linha);cursor:text;transition:background .35s var(--ease)}
.campo--inteiro{grid-column:1/-1}
.campo span{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.campo span i{font-style:normal;color:var(--suave);text-transform:none;letter-spacing:0}
.campo input,.campo textarea{font:inherit;font-size:16px;color:var(--azul);background:transparent;border:0;outline:0;width:100%;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(28,63,148,.38);text-transform:uppercase;font-size:14px;letter-spacing:.02em}
.campo:focus-within{background:rgba(169,193,236,.18)}
.campo.erro{background:rgba(232,102,42,.08)}
.campo.erro span{color:var(--laranja)}
.form__base{grid-column:1/-1;display:flex;align-items:stretch;justify-content:space-between;border-right:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.form__aviso{align-self:center;padding:0 20px;font-size:13px;color:var(--suave)}
.form__aviso.ok{color:var(--azul)}
.form__enviar{display:flex;align-items:center;gap:40px;padding:22px 28px;background:var(--azul);color:var(--branco);font-size:15px;font-weight:500;transition:background .35s var(--ease)}
.form__enviar b{font-weight:400;transition:transform .35s var(--ease)}
.form__enviar:hover{background:var(--noite)}
.form__enviar:hover b{transform:translateX(6px)}
@media (max-width:560px){
  .form{grid-template-columns:1fr}
  .form__base{flex-direction:column}
  .form__aviso{padding:16px 20px}
  .form__enviar{justify-content:space-between}
}

/* ---------- rodapé minimalista ---------- */
.rodape__marca{margin:clamp(56px,7vw,100px) 0 28px;width:clamp(150px,18vw,260px)}
.rodape__marca span{font-size:calc(clamp(150px,18vw,260px)*.078)!important;margin-top:.35em}

.form__mel{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form__enviar[disabled]{opacity:.6;cursor:wait}

/* ---------- página de projeto ---------- */
.proj{padding:clamp(120px,14vw,180px) var(--gutter) 0}
.proj__voltar{display:inline-block;font-size:13px;font-weight:500;color:var(--suave);margin-bottom:clamp(28px,4vw,48px);transition:color .3s}
.proj__voltar:hover{color:var(--laranja)}
.proj__meta{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,64px);align-items:end;padding-bottom:clamp(24px,3vw,40px)}
.proj__meta p{font-size:clamp(20px,2.2vw,30px);letter-spacing:-.02em;line-height:1.2;max-width:28ch}
.proj__meta dl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.proj__meta dt{font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--suave);margin-bottom:6px}
.proj__meta dd{font-size:14px;font-weight:500}
.galeria{padding:0 var(--gutter) clamp(100px,12vw,180px)}
.fotos{columns:3;column-gap:clamp(12px,1.6vw,24px)}
.foto{display:block;break-inside:avoid;margin-bottom:clamp(12px,1.6vw,24px);overflow:hidden;background:var(--ceu);cursor:zoom-in}
.foto img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
.foto:hover img{transform:scale(1.03)}
.proj__proximo{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(56px,8vw,110px);padding-top:18px;border-top:1px solid var(--linha);font-size:clamp(20px,2.4vw,34px);letter-spacing:-.025em}
.proj__proximo b{font-weight:500;transition:color .3s}
.proj__proximo:hover b{color:var(--laranja)}
.caixa{position:fixed;inset:0;z-index:80;background:rgba(11,29,69,.94);display:flex;align-items:center;justify-content:center;padding:60px 70px}
.caixa[hidden]{display:none}
.caixa img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.caixa button{position:absolute;color:var(--branco);font-size:13px;font-weight:500;padding:12px}
.caixa__fechar{top:14px;right:var(--gutter)}
.caixa__seta{top:50%;transform:translateY(-50%);font-size:22px!important}
.caixa__seta--ant{left:10px}.caixa__seta--prox{right:10px}
.caixa__n{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:var(--branco);font-size:11px;letter-spacing:.06em;opacity:.7}
@media (max-width:900px){.fotos{columns:2}.proj__meta{grid-template-columns:1fr}}
@media (max-width:560px){.fotos{columns:1}.proj__meta dl{grid-template-columns:1fr 1fr}.caixa{padding:56px 8px}.caixa__seta{top:auto;bottom:6px;transform:none}}
.rodape__cols a.insta{display:inline-flex;align-items:center;gap:10px;transition:color .3s}
.rodape__cols a.insta svg{flex:none}