/* MIX NET — primeira dobra (v4): cabeçalho compacto, hero do tamanho exato da janela,
   arte enquadrada por formato e camada de meteoros. Carregar depois de brand-refresh.css. */
:root{--header-h:77px}

/* Cabeçalho: 76px + 1px de borda no desktop. */
.header-inner{height:76px;gap:24px}
.brand{gap:3px}
.logo-window{width:128px;height:35px}
.logo-window img{width:216px;left:-45px;top:-17px}
.brand-caption{font-size:.6875rem;line-height:1.4;letter-spacing:1.1px}
.desktop-nav{gap:28px}
.desktop-nav a{padding:11px 0}
.header-cta{min-height:40px;padding:8px 16px;gap:8px}

/* Hero = janela menos o cabeçalho. */
.hero.hero-fold{--strip-h:61px;--gutter:48px;--copy-w:min(540px,44cqw);container-type:inline-size;display:flex;flex-direction:column;min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));background:radial-gradient(60% 85% at 80% 42%,#06111b 0%,#020406 72%)}
.hero-fold::before{background:linear-gradient(90deg,rgba(2,4,6,.8) 0%,rgba(2,4,6,.45) 30%,rgba(2,4,6,0) 50%),linear-gradient(0deg,#020406 0,rgba(2,4,6,.5) var(--strip-h),rgba(2,4,6,0) calc(var(--strip-h) + 90px))}

/* Arte inteira, nunca cortada: a largura é o menor valor entre o espaço à direita do texto
   (o conjunto começa em 41% da imagem) e o que cabe na altura (o conjunto ocupa 72% dela). */
.hero-fold .hero-background{position:absolute;inset:0;z-index:-2;display:block;overflow:hidden;margin:0}
.hero-fold .hero-background img{position:absolute;left:auto;right:0;bottom:auto;top:calc((100% - var(--strip-h)) / 2);transform:translateY(-50%);width:min(calc((100cqw - max(var(--gutter),(100cqw - 1200px) / 2) - var(--copy-w) - 32px) / .59),calc(2.955 * (100vh - var(--header-h) - var(--strip-h) - 40px)),2000px);width:min(calc((100cqw - max(var(--gutter),(100cqw - 1200px) / 2) - var(--copy-w) - 32px) / .59),calc(2.955 * (100svh - var(--header-h) - var(--strip-h) - 40px)),2000px);height:auto;min-height:0;max-width:none;object-fit:contain;object-position:center;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-composite:intersect}

.hero-fold .hero-inner{flex:1 1 auto;display:flex;align-items:center;min-height:0;padding-block:clamp(24px,5svh,56px)}
.hero-fold .hero-copy{width:var(--copy-w);max-width:100%;padding:0}
.hero-fold .eyebrow{margin-bottom:clamp(14px,3svh,26px)}
.hero-fold h1{font-size:clamp(2.6rem,4.9vw,4.65rem);font-size:clamp(2.6rem,min(4.9vw,8.4svh),4.65rem);line-height:1.1;letter-spacing:-.035em;margin-bottom:clamp(14px,2.8svh,25px)}
.hero-fold .hero-description{font-size:1rem;line-height:1.8;max-width:480px}
.hero-fold .hero-actions{margin-top:clamp(18px,3.4svh,30px)}
.hero-fold .hero-facts{margin-top:clamp(18px,3.8svh,37px)}
.hero-fold .hero-bottom{flex:0 0 auto;min-height:var(--strip-h);height:auto;padding-block:14px}

/* Acima da arte (-2), abaixo do conteúdo; não participa do layout. */
.hero-fold .meteor-layer{position:absolute;inset:0;z-index:-1;width:100%;height:100%;overflow:hidden;pointer-events:none;contain:strict}
.hero-fold .meteor{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}
.hero-fold .meteor::before{content:"";position:absolute;bottom:0;left:0;width:var(--meteor-width,1.3px);height:var(--meteor-length,110px);border-radius:50%;background:linear-gradient(to top,#eefaff 0%,#b8edff 9%,#57cdff80 42%,#1c9dff00 100%);box-shadow:0 0 5px #67d9ff40;transform:rotate(var(--meteor-angle,0deg));transform-origin:50% 100%}
.hero-fold .meteor::after{content:"";position:absolute;left:-1px;top:-1px;width:2px;height:2px;border-radius:50%;background:#effaff;box-shadow:0 0 5px 1px #8adeff70}

@supports not (width:1cqw){
  .hero-fold .hero-copy{width:540px;max-width:46%}
  .hero-fold .hero-background img{width:min(58vw,calc(2.955 * (100vh - 178px)))}
}

@media (max-width:1100px){
  .hero.hero-fold{--gutter:32px;--copy-w:min(520px,46cqw)}
  .desktop-nav{gap:22px}
}
@media (max-width:800px){
  :root{--header-h:71px}
  .header-inner{height:70px}
  .hero.hero-fold{--gutter:24px}
}

/* Tablet em pé e telas estreitas: texto no alto, arte inteira logo abaixo. */
@media (max-width:1100px) and (orientation:portrait),(max-width:859px){
  .hero.hero-fold{background:#020406}
  .hero-fold::before{background:none}
  .hero-fold .hero-inner{order:1;flex:0 0 auto;align-items:flex-start;padding-block:clamp(28px,4.5svh,48px) 0}
  .hero-fold .hero-copy{width:min(560px,100%)}
  .hero-fold h1{font-size:clamp(2.6rem,7.4vw,3.65rem)}
  .hero-fold .hero-background{order:2;position:relative;inset:auto;flex:1 0 auto;display:flex;align-items:center;justify-content:flex-end;overflow:hidden;margin-top:-20px}
  .hero-fold .hero-background img{position:relative;top:auto;right:auto;transform:none;flex:0 0 auto;width:min(calc(100cqw / .62),calc(2.133 * .42 * (100vh - var(--header-h))));width:min(calc(100cqw / .62),calc(2.133 * .42 * (100svh - var(--header-h))));-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
  .hero-fold .hero-bottom{order:3}
}

/* Celular: arte no alto (marca e bolhas inteiras), título e botões logo abaixo. */
@media (max-width:600px){
  :root{--header-h:67px}
  .header-inner{height:66px}
  .logo-window{width:116px;height:31px}
  .logo-window img{width:196px;left:-41px;top:-15px}
  .brand-caption{font-size:.625rem;letter-spacing:.8px}
  .hero.hero-fold{--gutter:20px}
  .hero-fold .hero-background{order:0;flex:0 0 auto;margin-top:0}
  .hero-fold .hero-background img{width:min(calc(100cqw / .62),calc(2.133 * .4 * (100vh - var(--header-h))));width:min(calc(100cqw / .62),calc(2.133 * .4 * (100svh - var(--header-h))));-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 80%,transparent 100%)}
  .hero-fold .hero-inner{order:1;flex:1 0 auto;margin-top:-28px;padding-block:0 24px}
  .hero-fold .eyebrow{margin-bottom:16px}
  .hero-fold h1{font-size:clamp(2.4rem,11.2vw,3.2rem);letter-spacing:-.04em;margin-bottom:16px}
  .hero-fold .hero-description{font-size:.9375rem;line-height:1.75}
  .hero-fold .hero-actions{margin-top:20px}
  .hero-fold .hero-facts{margin-top:20px}
}

@media (prefers-reduced-motion:reduce){.hero-fold .meteor-layer{display:none}}