/* ==========================================================================
   MODUZZ · Monolito. Carregado depois de site.css.
   Linguagem: preto puro, tudo centralizado, Barlow Condensed fina em caixa
   alta com tracking largo, imagens que se dissolvem no preto (sem moldura,
   sem caixa), nenhum botão preenchido: ações são texto sublinhado.
   Escopo: chrome global (.mz-nav, .mz-footer, cookies) e home (.mz-home).
   ========================================================================== */

:root{
  --mz-black:#000;
  --mz-ink:#f2efe9;
  --mz-ink-2:#bdb9b1;
  --mz-muted:#8d8a84;
  --mz-dim:#4a4946;
  --mz-rule:rgba(242,239,233,.14);
  --mz-condensed:"Barlow Condensed", "Arial Narrow", sans-serif;
  --mz-sans:"Barlow", system-ui, -apple-system, sans-serif;
  --mz-pad:clamp(20px, 4.5vw, 64px);
  --mz-gap:clamp(120px, 14vw, 200px);
  --mz-fade-down:linear-gradient(180deg, #000 60%, transparent 100%);
}

/* A home é preta de ponta a ponta; as texturas do tema antigo ficam de fora. */
body.mz-is-home,
body.mz-is-home main,
body.mz-is-page,
body.mz-is-page main{background:var(--mz-black)}
html:has(body.mz-is-home),
html:has(body.mz-is-page){background:var(--mz-black)}

/* ===== Rótulos e textos ===== */
.mz-label{
  margin:0;
  font-family:var(--mz-condensed);
  font-size:13px;
  font-weight:400;
  letter-spacing:.4em;
  line-height:1.4;
  text-transform:uppercase;
  color:var(--mz-muted);
}
.mz-label--wide{letter-spacing:.5em}
.mz-title{
  margin:22px 0 clamp(48px, 5vw, 72px);
  font-family:var(--mz-condensed);
  font-size:clamp(34px, 3.9vw, 56px);
  font-weight:300;
  line-height:1.02;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  color:var(--mz-ink);
}
.mz-title--large{
  max-width:18ch;
  margin-bottom:0;
  font-size:clamp(40px, 5vw, 72px);
  letter-spacing:.04em;
}
.mz-text{
  max-width:52ch;
  margin:28px auto 0;
  font-family:var(--mz-sans);
  font-size:17px;
  font-weight:300;
  line-height:1.75;
  text-align:center;
  color:var(--mz-muted);
}
.mz-link{
  display:inline-flex;
  gap:14px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(242,239,233,.55);
  font-family:var(--mz-condensed);
  font-size:14px;
  font-weight:400;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--mz-ink);
  transition:border-color .3s ease, color .3s ease;
}
.mz-link:hover{border-color:var(--mz-ink);color:#fff}
.mz-link--quiet{border-color:rgba(242,239,233,.2);color:var(--mz-ink-2)}
.mz-home a:focus-visible,
.mz-nav a:focus-visible,
.mz-footer a:focus-visible,
.mz-nav summary:focus-visible{outline:1px solid var(--mz-ink);outline-offset:6px}

/* ===== Nav: links à esquerda, logo ao centro, ação à direita ===== */
.mz-nav{
  position:sticky;
  top:0;
  z-index:30;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  height:88px;
  padding:0 var(--mz-pad);
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(14px);
  font-family:var(--mz-condensed);
}
.mz-nav__links{display:flex;gap:clamp(20px, 2.6vw, 36px)}
.mz-nav__links a,
.mz-nav__cta{
  font-size:13px;
  font-weight:400;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--mz-muted);
  transition:color .3s ease;
}
.mz-nav__links a:hover{color:var(--mz-ink)}
.mz-nav__brand{justify-self:center;display:flex}
.mz-nav__brand img{height:16px;width:auto;display:block}
.mz-nav__cta{justify-self:end;color:var(--mz-ink)}
.mz-nav__cta:hover{color:#fff}
/* Na home a logo grande da abertura já assina a página. */
body.mz-is-home .mz-nav__brand{visibility:hidden}
body.mz-is-home.scrolled .mz-nav__brand{visibility:visible}

.mz-nav .nav-mobile{display:none;justify-self:end}
.mz-nav .nav-mobile summary{border:0;width:44px;height:44px}
.mz-nav .nav-mobile nav{background:#0a0a0a;border:1px solid var(--mz-rule);box-shadow:none}
.mz-nav .nav-mobile nav a{
  font-family:var(--mz-condensed);
  font-size:14px;
  letter-spacing:.3em;
  color:var(--mz-ink);
  border-bottom-color:var(--mz-rule);
}

@media (max-width:900px){
  .mz-nav{grid-template-columns:auto 1fr auto;height:68px}
  .mz-nav__links,.mz-nav__cta{display:none}
  .mz-nav__brand{grid-column:1;justify-self:start}
  .mz-nav .nav-mobile{display:block;grid-column:3}
}

/* ===== Abertura ===== */
.mz-home{
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow-x:clip;
  background:var(--mz-black);
  color:var(--mz-ink);
  font-family:var(--mz-sans);
}
.mz-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  padding-top:clamp(40px, 5vw, 72px);
}
.mz-hero__brand{margin:0 0 26px;line-height:0}
.mz-hero__brand img{height:clamp(84px, 9vw, 132px);width:auto}
.mz-hero .mz-label{text-align:center;padding:0 var(--mz-pad)}
/* A faixa de cinema: a imagem se apaga nas quatro bordas, sem moldura. */
.mz-hero__film{
  position:relative;
  width:100%;
  height:clamp(260px, 29vw, 460px);
  margin:clamp(40px, 4.5vw, 64px) 0 0;
  overflow:hidden;
}
.mz-hero__film img,
.mz-hero__film video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 97%;
  filter:brightness(.8) contrast(1.15) saturate(.7);
  display:block;
}
.mz-hero__film::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, #000 0%, transparent 30%, transparent 70%, #000 100%),
    linear-gradient(90deg, #000 0%, transparent 18%, transparent 82%, #000 100%);
}
.mz-disciplines,
.mz-steps{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px 56px;
  margin:40px 0 0;
  padding:0 var(--mz-pad);
  list-style:none;
  font-family:var(--mz-condensed);
  font-size:14px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--mz-ink-2);
}
.mz-disciplines li + li::before,
.mz-steps li + li::before{
  content:"·";
  margin-right:56px;
  margin-left:-.34em;
  color:#3a3936;
}
.mz-steps li + li::before{content:"—"}

/* ===== Seções ===== */
.mz-section{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  box-sizing:border-box;
  margin-top:var(--mz-gap);
  padding:0 var(--mz-pad);
  text-align:center;
}

/* Galeria conceitual: quatro retratos desencontrados, sem legenda */
.mz-program{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 316px));
  gap:16px;
  justify-content:center;
  width:100%;
}
.mz-program > :nth-child(even){margin-top:60px}
.mz-program img{
  width:100%;
  aspect-ratio:316 / 560;
  object-fit:cover;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 68%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 68%, transparent 100%);
  display:block;
}

/* A galeria abre logo depois da abertura, com menos respiro. */
.mz-gallery{margin-top:clamp(96px, 10vw, 150px)}

/* Segunda faixa de cinema (outra marca), na mesma linguagem da abertura */
.mz-film-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  margin-top:var(--mz-gap);
}
/* Mesmo padrão da abertura: faixa baixa, escura, carro parcialmente escondido. */
.mz-film-block .mz-hero__film{margin-top:0}
.mz-film-block .mz-hero__film img{
  object-position:50% 52%;
  filter:brightness(.7) contrast(1.15) saturate(.7);
  /* Aproxima e centraliza o carro na faixa: teto e rodas somem na sombra. */
  transform:scale(1.4);
  transform-origin:85% 58%;
}
.mz-film-block .mz-label{margin-top:28px;text-align:center;padding:0 var(--mz-pad)}

/* ===== Quem somos ===== */
.mz-about__intro{margin-top:clamp(72px, 9vw, 140px)}
.mz-about__photo{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  width:min(560px, 88vw);
  margin:clamp(72px, 8vw, 120px) auto 0;
}
.mz-about__photo img{
  width:100%;
  height:auto;
  display:block;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 68%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 68%, transparent 100%);
  mask-composite:intersect;
}
.mz-about__photo .mz-label{font-size:12px}
.mz-principles{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:48px;
  width:100%;
  max-width:1080px;
  margin:0;
  padding:0;
  list-style:none;
}
.mz-principles li{display:flex;flex-direction:column;align-items:center;gap:16px}
.mz-principles__name{
  font-family:var(--mz-condensed);
  font-size:clamp(26px, 2.4vw, 34px);
  font-weight:300;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mz-ink);
}
.mz-principles__text{
  max-width:30ch;
  font-family:var(--mz-sans);
  font-size:16px;
  font-weight:300;
  line-height:1.7;
  color:var(--mz-muted);
}

/* Fechamento */
.mz-close .mz-actions{display:flex;gap:48px;margin-top:44px}

/* ===== Rodapé ===== */
.mz-footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:32px;
  padding:clamp(120px, 12vw, 180px) var(--mz-pad) 40px;
  background:var(--mz-black);
  text-align:center;
}
.mz-footer__logo{height:56px;width:auto;display:block}
.mz-footer__links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px 36px;
  font-family:var(--mz-condensed);
  font-size:12px;
  letter-spacing:.3em;
  text-transform:uppercase;
}
.mz-footer__links a{color:var(--mz-muted);transition:color .3s ease}
.mz-footer__links a:hover{color:var(--mz-ink)}
.mz-footer__meta{margin:0;font-family:var(--mz-sans);font-size:12px;letter-spacing:.1em;color:var(--mz-dim)}
.mz-footer__meta a{color:var(--mz-dim)}
.mz-footer__meta a:hover{color:var(--mz-muted)}

/* ===== Aviso de cookies no mesmo tom ===== */
.cookie-banner{background:rgba(0,0,0,.96);border-top:1px solid var(--mz-rule)}
.cookie-banner .cookie-btn{
  border-radius:0;
  font-family:var(--mz-condensed);
  letter-spacing:.3em;
}

/* ===== Responsivo ===== */
@media (max-width:1100px){
  .mz-program{grid-template-columns:repeat(2, minmax(0, 316px))}
  .mz-program > :nth-child(even){margin-top:40px}
}
@media (max-width:640px){
  .mz-principles{grid-template-columns:minmax(0, 1fr);gap:40px}
  .mz-program{gap:12px}
  .mz-program > :nth-child(even){margin-top:28px}
  .mz-disciplines,.mz-steps{gap:12px 22px;font-size:12px;letter-spacing:.26em}
  .mz-disciplines li + li::before,.mz-steps li + li::before{margin-right:22px}
  .mz-close .mz-actions{flex-direction:column;align-items:center;gap:28px}
  .mz-label{letter-spacing:.3em}
  /* Faixa de abertura mais alta e ancorada nos faróis. */
  .mz-hero .mz-hero__film{height:300px}
  .mz-hero .mz-hero__film img,.mz-hero .mz-hero__film video{object-position:50% 100%}
  .mz-film-block .mz-hero__film{height:300px}
  .mz-film-block .mz-hero__film img{object-position:60% 55%;transform:scale(1.15);transform-origin:60% 58%}
  /* As quatro frentes em 2 × 2, sem separador sobrando na quebra. */
  .mz-disciplines,.mz-steps{display:grid;grid-template-columns:repeat(2, auto);justify-content:center;gap:14px 36px}
  .mz-disciplines li + li::before,.mz-steps li + li::before{content:none}
}

@media (prefers-reduced-motion:reduce){
  .mz-home *{transition:none}
}