/* ==========================================================================
   Unità Coral e Orquestra — v2 (REF 2: editorial dark, corporativo)
   Marca: grafite #1A1A1A + prata #CCCCCC (extraídos do logo). Sec.: #343434.
   Tipos: Playfair Display (serifa editorial) + Outfit (caps/UI/corpo).
   ========================================================================== */

:root{
  --deep:#2E2E2E;          /* fundo mais profundo: splash, hero, footer */
  --graphite:#343434;       /* grafite da marca — superfícies escuras */
  --graphite-2:#4A4A4A;     /* secundária da marca — painéis, bordas no escuro */
  --silver:#CCCCCC;         /* prata da marca — 11.7:1 sobre #111 */
  --silver-hi:#E9E9E9;      /* títulos no escuro */
  --silver-mut:#A8A8A8;     /* 6:1 sobre grafite — texto de apoio no escuro */
  --paper:#EDEDEB;          /* seções claras */
  --ink:#2B2B2B;
  --ink-soft:#565656;       /* 6.8:1 sobre paper */
  --line-d:#474747;
  --line-l:#D8D8D6;

  --font-serif:"Playfair Display",Georgia,serif;
  --font-sans:"Outfit",system-ui,sans-serif;

  --wrap:80rem;
  --pad:clamp(1.25rem,5vw,3rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:280ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--graphite);color:var(--silver);
  font-family:var(--font-sans);font-weight:300;font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.lock{overflow:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
h1,h2,h3{margin:0;line-height:1.05}
p,blockquote,dl,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
em{font-style:italic}

:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--silver);outline-offset:3px}

.skip{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;background:var(--silver);color:var(--ink);z-index:300;
}
.skip:focus{position:fixed;top:.5rem;left:.5rem;width:auto;height:auto;clip-path:none;padding:.75rem 1.25rem}

/* ---------- títulos ---------- */
.h-serif{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(2.5rem,6vw,4.5rem);letter-spacing:-.01em;color:var(--ink);
}
.h-serif em{font-style:italic;font-weight:400}
.h-serif--light{color:var(--silver-hi)}

.linkline{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  font-size:.9375rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid currentColor;padding-bottom:2px;
  transition:opacity var(--dur) var(--ease);
}
.linkline svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.linkline:hover{opacity:.65}
.linkline:hover svg{transform:translate(3px,-3px)}
.linkline--light{color:var(--silver)}

/* ==========================================================================
   ABERTURA
   ========================================================================== */
.splash{
  position:fixed;inset:0;z-index:200;background:var(--graphite);
  display:grid;place-items:center;
  /* a saída é uma animação CSS com delay — a abertura termina SOZINHA,
     mesmo em ambiente sem JavaScript. O JS só antecipa (pular). */
  animation:splashOut 700ms cubic-bezier(.65,0,.35,1) 2600ms forwards;
}
.splash.out{animation:splashOut 480ms cubic-bezier(.65,0,.35,1) 0ms forwards}
@keyframes splashOut{
  0%{transform:translateY(0);visibility:visible}
  99%{transform:translateY(-101%);visibility:visible}
  100%{transform:translateY(-101%);visibility:hidden}
}
.splash__center{display:grid;justify-items:center;gap:1.5rem;padding:1rem;width:min(340px,86vw)}
.splash__mark{width:clamp(84px,14vw,128px)}
.splash__mark img{
  width:100%;height:auto;
  will-change:clip-path;transform:translateZ(0);
  clip-path:inset(0 0 100% 0);
  animation:markWipe 900ms 200ms var(--ease) forwards;
}
.splash__line{
  width:0;height:1px;background:var(--silver-mut);
  animation:lineGrow 600ms 950ms var(--ease) forwards;
}
.splash__word{
  font-size:.8125rem;font-weight:400;color:var(--silver-mut);
  letter-spacing:.55em;text-indent:.55em;   /* compensa o tracking na centralização */
  opacity:0;
  animation:wordIn 700ms 1250ms var(--ease) forwards;
}
@keyframes markWipe{to{clip-path:inset(0 0 0% 0)}}
@keyframes lineGrow{to{width:min(200px,44vw)}}
@keyframes wordIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{background:rgba(46,46,46,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:var(--line-d)}
.nav__in{
  max-width:var(--wrap);margin-inline:auto;padding:.875rem var(--pad);
  display:flex;align-items:center;gap:2rem;
}
.nav__brand{margin-right:auto;display:flex;align-items:center;min-height:44px}
.nav__brand img{width:118px;height:auto}
.nav__links{display:flex;gap:2rem}
.nav__links a{
  font-size:.8125rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:var(--silver);padding:.625rem 0;position:relative;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:.3rem;height:1px;
  background:var(--silver);transition:right var(--dur) var(--ease);
}
.nav__links a:hover::after{right:0}
.nav__cta{
  display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.375rem;
  border:1px solid var(--graphite-2);border-radius:999px;
  font-size:.8125rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--silver-hi);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.nav__cta:hover{background:var(--silver);color:var(--ink);border-color:var(--silver)}
.nav__burger{display:none;flex:none;width:44px;height:44px;place-items:center;z-index:130}
.nav__burger span{display:block;width:24px;height:1.5px;background:var(--silver);transition:transform var(--dur) var(--ease)}
.nav__burger span+span{margin-top:7px}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(4.25px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-4.25px) rotate(-45deg)}

/* fechado por PADRÃO no CSS — display:flex incondicional anularia o [hidden]
   e deixaria o overlay permanentemente na frente do site (bug da prévia). */
.menu{
  position:fixed;inset:0;z-index:120;background:var(--graphite);
  display:none;flex-direction:column;justify-content:center;
  padding:var(--pad);
}
.menu.is-open{display:flex}
.menu__in{display:grid;gap:.25rem}
.menu__in a{
  font-family:var(--font-serif);font-size:clamp(2rem,9vw,3.25rem);font-weight:500;
  color:var(--silver-hi);padding:.5rem 0;min-height:44px;
  border-bottom:1px solid var(--line-d);
  transition:color var(--dur) var(--ease),padding-left var(--dur) var(--ease);
}
.menu__in a:hover{color:#fff;padding-left:.75rem}
.menu__foot{margin-top:2.5rem;font-size:.8125rem;letter-spacing:.2em;text-transform:uppercase;color:var(--silver-mut)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden}
.hero__bg{position:absolute;inset:0}
.hero__bg img{
  width:100%;height:112%;object-fit:cover;object-position:50% 38%;
  filter:grayscale(1) contrast(1.05) brightness(.95);
  will-change:transform;
}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(52,52,52,.55) 0%,rgba(52,52,52,.28) 45%,rgba(52,52,52,.78) 100%);
}
.hero__txt{position:relative;text-align:center;padding:6rem var(--pad) 8rem;max-width:60rem}
.hero__kicker{
  font-size:.8125rem;font-weight:400;letter-spacing:.42em;text-transform:uppercase;
  color:var(--silver);margin-bottom:1.75rem;
}
.hero__title{
  font-family:var(--font-sans);font-weight:500;
  font-size:clamp(2.25rem,6.5vw,5rem);line-height:1.14;
  letter-spacing:.14em;text-transform:uppercase;color:#F3F3F2;
}
.hero__title .u{
  border-bottom:2px solid var(--silver);padding-bottom:.06em;
}
.hero__sub{
  margin-top:2rem;font-size:.9375rem;font-weight:300;letter-spacing:.12em;
  color:var(--silver);
}
.hero__cue{position:absolute;bottom:2rem;left:50%;translate:-50% 0}
.hero__cue span{
  display:block;width:1px;height:56px;background:var(--graphite-2);position:relative;overflow:hidden;
}
.hero__cue span::after{
  content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;
  background:var(--silver);animation:cue 1.8s var(--ease) infinite;
}
@keyframes cue{to{top:110%}}

/* ---------- cartão sobreposto (ref: bloco laranja) ---------- */
.intro{
  position:relative;z-index:5;
  max-width:var(--wrap);margin:clamp(-6rem,-9vw,-4.5rem) auto 0;
  padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(260px,.9fr) 1.6fr;
}
.intro__card{background:var(--silver);color:var(--ink);padding:clamp(1.5rem,3vw,2.25rem);display:grid;justify-items:center;text-align:center;align-content:center}
.intro__it{font-size:.8125rem;letter-spacing:.3em;text-transform:uppercase;color:#4A4A4A;margin-bottom:.875rem}
.intro__name{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:clamp(2.5rem,4.5vw,3.5rem)}
/* logo oficial (só o nome, versão reduzida) — menor e com respiro, pedido do cliente */
.intro__name img{width:min(118px,42%);height:auto;margin:.5rem auto .375rem}
.intro__cap{margin-top:.5rem;font-size:.8125rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#333}
.intro__cols{
  background:var(--graphite);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.5vw,2rem);
  padding:clamp(1.75rem,3.5vw,2.75rem);
  align-content:center;
}
.intro__col h3{
  font-size:.8125rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--silver-hi);padding-top:.875rem;border-top:2px solid var(--silver);
  display:inline-block;margin-bottom:.625rem;
}
.intro__col p{font-size:.875rem;color:var(--silver-mut);max-width:26ch}

/* ==========================================================================
   O GRUPO — colagem editorial clara
   ========================================================================== */
.grupo{
  position:relative;background:var(--paper);color:var(--ink);
  padding:clamp(5rem,10vw,9rem) var(--pad);overflow:hidden;
}
.grupo__ano{
  position:absolute;top:2rem;left:-1rem;z-index:0;
  font-family:var(--font-serif);font-style:italic;font-weight:500;
  font-size:clamp(9rem,24vw,20rem);line-height:1;color:#E1E1DE;
  user-select:none;pointer-events:none;
}
.grupo__vertical{
  position:absolute;top:50%;right:calc(var(--pad)/2 - .5rem);translate:0 -50%;
  writing-mode:vertical-rl;
  font-size:.75rem;letter-spacing:.42em;text-transform:uppercase;color:#8B8B88;
}
.grupo__quote{position:relative;z-index:1;max-width:56rem;margin-inline:auto}
.grupo__quote p{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(1.625rem,4vw,2.875rem);line-height:1.3;letter-spacing:-.01em;
}
.grupo__quote em{font-style:italic;border-bottom:1px solid var(--ink)}
.grupo__grid{
  position:relative;z-index:1;
  max-width:var(--wrap);margin:clamp(3.5rem,7vw,5.5rem) auto 0;
  display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start;
}
.grupo__ph{overflow:hidden;background:var(--graphite)}
.grupo__ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.grupo__ph--a{aspect-ratio:3/2}
.grupo__txt{display:grid;gap:1.25rem;align-content:start;padding-top:.5rem}
.grupo__txt p{font-size:1.0625rem;line-height:1.75;color:#3A3A38;max-width:46ch}
.grupo__txt .linkline{justify-self:start;margin-top:.5rem}

/* ==========================================================================
   NÚMEROS — faixa escura
   ========================================================================== */
.numeros{background:var(--silver);padding:clamp(4rem,8vw,6.5rem) var(--pad)}
.numeros__grid{
  max-width:var(--wrap);margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(2rem,4vw,3rem);
}
.num dt{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(3rem,6.5vw,5rem);line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.num dd{
  margin:.75rem 0 0;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
  color:#4A4A4A;max-width:16ch;
}
.numeros__nota{
  max-width:var(--wrap);margin:2.5rem auto 0;
  font-size:.75rem;letter-spacing:.06em;color:#5C5C5C;
}

/* ==========================================================================
   FORMAÇÕES — produto, claro
   ========================================================================== */
.formacoes{background:var(--paper);color:var(--ink);padding:clamp(5rem,10vw,8rem) var(--pad)}
.formacoes__head{
  max-width:var(--wrap);margin-inline:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:end;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.formacoes__sub{font-size:1rem;color:var(--ink-soft);max-width:44ch;justify-self:end}

/* categorias de serviço: 01 Cerimônia · 02 Recepção · 03 Jantar */
.cat{
  max-width:var(--wrap);margin-inline:auto;
  display:grid;grid-template-columns:minmax(220px,.75fr) 1.6fr;
  gap:clamp(1.5rem,4vw,4rem);
  padding:clamp(2.25rem,4.5vw,3.5rem) 0;
  border-top:1px solid var(--line-l);
}
.cat:last-child{border-bottom:1px solid var(--line-l)}
.cat__head{align-self:start;position:sticky;top:5.5rem}
.cat__n{
  font-family:var(--font-serif);font-style:italic;
  font-size:clamp(1.125rem,2vw,1.5rem);color:#A9A9A5;display:block;
}
.cat__t{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(2rem,4.2vw,3.25rem);letter-spacing:-.01em;margin-top:.25rem;
}
.cat__desc{margin-top:.75rem;font-size:.9375rem;color:var(--ink-soft);max-width:24ch}
.cat__nota{font-size:.9375rem;color:var(--ink-soft);max-width:46ch;align-self:center}
.cat--breve .cat__body{display:grid;align-content:center;min-height:100%}

.cat__grupo+.cat__grupo{margin-top:clamp(1.75rem,3.5vw,2.5rem)}
.cat__subdesc{font-size:.875rem;color:var(--ink-soft);margin:0 0 .625rem;max-width:52ch}

/* botão de orçamento por categoria — minimalista, canal WhatsApp */
.orcar{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;margin-top:.875rem;
  font-size:.8125rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
  box-shadow:inset 0 -1px 0 var(--line-l);
  transition:color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.orcar .ico{width:16px;height:16px;flex:none}
.orcar svg.seta{width:14px;height:14px;flex:none;transition:transform var(--dur) var(--ease)}
.orcar:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
.orcar:hover svg.seta{transform:translate(2px,-2px)}
.formacoes__nota{
  max-width:var(--wrap);margin:clamp(2rem,4vw,3rem) auto 0;
  padding-top:1.25rem;border-top:1px solid var(--line-l);
}
.formacoes__nota p{font-size:.9375rem;color:var(--ink-soft);max-width:64ch}
.formacoes__nota em{font-family:var(--font-serif)}
.cat__sub{
  font-size:.8125rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 .375rem;
  padding-top:.75rem;border-top:2px solid var(--graphite);display:inline-block;
}
.fs li{
  display:grid;grid-template-columns:minmax(10rem,14rem) 1fr;gap:.5rem 1.5rem;
  align-items:baseline;
  padding:.875rem .25rem;border-bottom:1px solid var(--line-l);
  transition:background var(--dur) var(--ease),padding-left var(--dur) var(--ease);
}
.fs b{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(1.25rem,2.2vw,1.625rem);letter-spacing:0;
}
.fs span{font-size:.875rem;color:var(--ink-soft);line-height:1.55}
@media (hover:hover) and (pointer:fine){
  .fs li:hover{background:#E4E4E1;padding-left:.875rem}
}

/* ==========================================================================
   REPERTÓRIO — escuro, "discografia"
   ========================================================================== */
.rep{position:relative;background:#E4E4E2;padding:clamp(3.5rem,7vw,5.5rem) 0 clamp(3.5rem,6vw,5rem);overflow:hidden}
.rep__marquee{pointer-events:none;position:absolute;top:clamp(1rem,3vw,2.5rem);left:0;right:0;overflow:hidden}
.rep__track{
  display:flex;white-space:nowrap;width:max-content;
  font-family:var(--font-serif);font-style:italic;
  font-size:clamp(2.5rem,7vw,5.5rem);color:#D6D6D3;
  animation:marquee 60s linear infinite;
}
@keyframes marquee{to{transform:translateX(-50%)}}
.rep__in{position:relative;max-width:var(--wrap);margin-inline:auto;padding:clamp(2rem,5vw,3.5rem) var(--pad) 0}
.rep__head{display:grid;grid-template-columns:auto 1fr;gap:1.5rem clamp(2rem,5vw,4rem);align-items:end;margin-bottom:clamp(1.75rem,3.5vw,2.5rem)}
.rep__sub{font-size:.9375rem;color:var(--ink-soft);max-width:40ch;justify-self:end;padding-bottom:.5rem}
.tracks2{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,4.5rem)}
.tracks li{
  display:grid;grid-template-columns:2.5ch 1fr auto;gap:1.25rem;align-items:baseline;
  padding:.6875rem .25rem;border-bottom:1px solid #C9C9C6;
  transition:background var(--dur) var(--ease),padding-left var(--dur) var(--ease);
}
.tracks li:first-child{border-top:1px solid #C9C9C6}
.tracks i{font-style:normal;font-size:.8125rem;color:#7A7A78;font-variant-numeric:tabular-nums}
.tracks b{font-weight:400;font-size:clamp(1rem,1.8vw,1.1875rem);color:var(--ink);letter-spacing:.01em}
.tracks small{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:#7A7A78}
@media (hover:hover) and (pointer:fine){
  .tracks li:hover{background:#DBDBD8;padding-left:.875rem}
  .tracks li:hover small{color:var(--ink)}
}

.rep__all{margin-top:1.5rem;font-size:.875rem}

/* ==========================================================================
   AO VIVO — vídeos
   ========================================================================== */
.vivo{background:var(--graphite);border-top:1px solid var(--line-d);padding:clamp(5rem,9vw,7.5rem) var(--pad)}
.vivo__head{
  max-width:var(--wrap);margin-inline:auto;
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  margin-bottom:clamp(2.5rem,5vw,3.5rem);
}
.vivo__grid{
  max-width:var(--wrap);margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,1.75rem);
}
.clip{display:grid;gap:.875rem}
.clip__btn{
  position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--graphite);
  border:1px solid var(--line-d);
}
.clip__btn img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(.9);
  transition:filter 500ms var(--ease),transform 700ms var(--ease);
}
.clip__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:58px;height:58px;border-radius:999px;
  border:1px solid var(--silver);background:rgba(46,46,46,.55);
  display:grid;place-items:center;color:var(--silver-hi);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),scale var(--dur) var(--ease);
}
.clip__play svg{width:22px;height:22px;margin-left:2px}
.clip video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000;border:1px solid var(--line-d)}
.clip figcaption b{display:block;font-weight:400;font-size:1rem;color:var(--silver-hi)}
.clip figcaption span{font-size:.8125rem;color:var(--silver-mut)}
@media (hover:hover) and (pointer:fine){
  .clip__btn:hover img,.clip__btn:focus-visible img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.03)}
  .clip__btn:hover .clip__play{background:var(--silver);color:var(--ink);scale:1.06}
}
@media (hover:none){
  .clip.lit .clip__btn img{filter:grayscale(0) contrast(1) brightness(1)}
}

/* ==========================================================================
   CONTATO — full-bleed
   ========================================================================== */
.contato{position:relative;overflow:hidden}
.contato__bg{position:absolute;inset:0}
.contato__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;filter:grayscale(1) brightness(.5) contrast(1.05)}
.contato__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,46,46,.92),rgba(46,46,46,.55) 55%,rgba(46,46,46,.9))}
.contato__in{
  position:relative;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(3.5rem,7vw,5.5rem) var(--pad);
  display:grid;justify-items:center;text-align:center;
}
.contato__kicker{font-size:.8125rem;letter-spacing:.42em;text-transform:uppercase;color:var(--silver);margin-bottom:1.25rem}
.contato__title{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(2.25rem,5.5vw,4rem);color:#F3F3F2;letter-spacing:-.01em;
}
.contato__title em{font-style:italic;font-weight:400}
.contato__sub{margin-top:1.25rem;font-size:1rem;color:var(--silver);max-width:44ch}
.contato__acts{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:2rem}
.btn-solid{
  display:inline-flex;align-items:center;gap:.625rem;min-height:52px;padding:.875rem 1.75rem;
  background:var(--silver);color:var(--ink);border-radius:999px;
  font-weight:500;font-size:.9375rem;letter-spacing:.06em;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn-solid svg{width:20px;height:20px}
.btn-solid:hover{background:#fff;transform:translateY(-2px)}
.btn-line{
  display:inline-flex;align-items:center;min-height:52px;padding:.875rem 1.75rem;
  border:1px solid var(--graphite-2);border-radius:999px;color:var(--silver-hi);
  font-weight:400;font-size:.9375rem;letter-spacing:.06em;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.btn-line:hover{border-color:var(--silver);background:rgba(204,204,204,.08)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--graphite);border-top:1px solid var(--line-d)}
.foot__in{
  max-width:var(--wrap);margin-inline:auto;
  padding:clamp(1.75rem,3.5vw,2.5rem) var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
}
.foot__brand img{width:132px;height:auto}
.foot__nav{display:flex;gap:1.75rem;flex-wrap:wrap}
.foot__nav a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silver-mut);
  transition:color var(--dur) var(--ease);
}
.foot__nav a:hover{color:var(--silver-hi)}
.foot__bar{
  max-width:var(--wrap);margin-inline:auto;
  padding:1.25rem var(--pad) 2rem;border-top:1px solid var(--line-d);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.75rem;color:#7A7A7A;letter-spacing:.04em;
}

/* ==========================================================================
   REVEAL — conteúdo visível por padrão; só esconde com .js-reveal no <html>
   ========================================================================== */
.js-reveal [data-r]{opacity:0;transform:translateY(22px);transition:opacity 480ms var(--ease),transform 480ms var(--ease)}
.js-reveal [data-r].in{opacity:1;transform:none}
[data-r-d="1"]{transition-delay:80ms}
[data-r-d="2"]{transition-delay:160ms}
[data-r-d="3"]{transition-delay:240ms}
[data-r-d="4"]{transition-delay:320ms}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:1024px){
  .vivo__grid{grid-template-columns:repeat(2,1fr)}
  .tracks2{grid-template-columns:1fr;gap:0}
  .tracks ol+ol{margin-top:0}
  .rep__head{grid-template-columns:1fr}
  .rep__sub{justify-self:start;padding-bottom:0}
  .numeros__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:grid}
  .intro{grid-template-columns:1fr;margin-top:-4rem}
  .intro__cols{grid-template-columns:1fr;gap:1.5rem}
  .formacoes__head{grid-template-columns:1fr}
  .formacoes__sub{justify-self:start}
  .cat{grid-template-columns:1fr;gap:1.25rem}
  .cat__head{position:static}
  .fs li{grid-template-columns:1fr}
  .fs span{margin-top:-.125rem}
  .grupo__grid{grid-template-columns:1fr}
  .grupo__vertical{display:none}
}
@media (max-width:640px){
  /* dimensionado para "TAMBÉM SE OUVE" caber inteiro numa linha até 320px */
  .hero__title{font-size:clamp(1.5rem,7.8vw,2.5rem);letter-spacing:.08em;line-height:1.22}
  .hero__kicker{font-size:.75rem;letter-spacing:.3em}
  .contato__title{font-size:clamp(1.875rem,9vw,2.75rem)}
  .grupo__quote p{font-size:clamp(1.375rem,6.4vw,1.75rem)}
}
@media (max-width:560px){
  .vivo__grid{grid-template-columns:1fr;max-width:22rem;margin-inline:auto}
  .numeros__grid{gap:2.25rem 1.25rem}
  .foot__in{flex-direction:column;align-items:flex-start}
  .intro__card{padding:1.5rem 1.375rem}
  .intro__cols{padding:1.5rem 1.375rem}
}

/* celular deitado / janelas baixas: hero compacta e cabe */
@media (max-height:520px){
  .hero__txt{padding:5.75rem var(--pad) 3.5rem}
  .hero__title{font-size:clamp(1.5rem,4.5vw,2rem)}
  .hero__kicker{margin-bottom:1rem}
  .hero__sub{margin-top:1rem}
  .hero__cue{display:none}
  .splash__mark{width:clamp(64px,10vh,96px)}
}

/* entalhe/safe-area (iPhone em paisagem etc.) */
@supports (padding:max(0px)){
  .nav__in,.menu,.foot__in,.foot__bar{
    padding-left:max(var(--pad),env(safe-area-inset-left));
    padding-right:max(var(--pad),env(safe-area-inset-right));
  }
  .foot__bar{padding-bottom:max(2rem,env(safe-area-inset-bottom))}
}

/* ==========================================================================
   PREFERÊNCIAS
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .splash{display:none}
  .rep__track{animation:none;transform:none}
  .hero__cue{display:none}
  .js-reveal [data-r]{opacity:1;transform:none}
}