/* Callisto. Hero da home (variante MacBook)

   Duas colunas: o texto da hero à esquerda e um MacBook Pro 16 à direita com
   um site real da vitrine (NovaStore) rodando ao vivo dentro da tela.

   Como funciona: a moldura é um PNG com a área da tela recortada
   (transparente), então o conteúdo vivo fica ATRÁS da imagem e aparece pelo
   buraco. As medidas do recorte saíram do próprio arquivo (4608x2675 px):
   tela em x 498..4110, y 57..2366, que viram as porcentagens de --sc-*.
   O notch (aba preta no topo, 66px de 2309) fica escondido atrás da barra do
   navegador falso, que por isso nunca deve ficar mais baixa que ~4% da tela.

   Depende de core.css + home.css (usa .hero, .container, .btn, .label). */

.hero-mac {
  min-height: 100svh;
  /* svh (não vh) no padding tambem: no celular, vh usa a altura "grande" do
     viewport (como se a barra de endereço já tivesse sumido), mas no
     primeiro load ela ainda está visível — svh é a altura real disponível
     naquele momento. Misturar as duas unidades é o que fazia o h1 abrir
     mais baixo que a navbar e só "encaixar" depois de rolar a tela (rolagem
     esconde a barra e o viewport real cresce até bater com o vh usado). */
  padding: clamp(128px, 15svh, 184px) 0 clamp(56px, 8svh, 92px);
  background:
    radial-gradient(720px 520px at 78% 30%, rgba(42,111,219,.20) 0%, rgba(42,111,219,0) 68%),
    radial-gradient(560px 420px at 4% 88%, rgba(230,149,55,.12) 0%, rgba(230,149,55,0) 70%),
    var(--ink);
}
.hero-mac .container { max-width: var(--container-wide); pointer-events: auto; }

.hm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr);
  grid-template-areas: "copy stage" "proof stage";
  align-items: center;
  gap: clamp(36px, 4.4vw, 68px);
}

/* ---- Coluna de texto ---- */
.hm-copy { grid-area: copy; position: relative; z-index: 2; }
.hm-copy h1 { font-size: clamp(40px, 4.1vw, 62px); max-width: 13ch; }
.hm-copy .lead { font-size: clamp(17px, 1.35vw, 20px); max-width: 40ch; margin-top: 22px; color: var(--text-on-ink); }
.hm-copy .ctas { margin-top: 32px; }
.hm-copy .ctas .btn { padding: 13px 20px; font-size: 16px; }

/* Desktop (>=1025px): o h1 e o lead sobem de tamanho pra ocupar a coluna de
   texto, que aqui e larga. Este bloco precisa vir DEPOIS das regras base de
   .hm-copy — antes ele ficava logo acima delas e, com a mesma especificidade,
   nunca chegava a valer (o h1 travava em 4.1vw / 62px em qualquer monitor). */
@media (min-width: 1025px) {
  .hm-copy h1 { font-size: clamp(52px, 5vw, 74px); max-width: 16ch; }
  .hm-copy .lead { font-size: clamp(19px, 1.55vw, 24px); max-width: 36ch; margin-top: 26px; }
  .hm-copy .ctas { margin-top: 36px; }
  .hm-copy .ctas .btn { padding: 15px 24px; font-size: 16.5px; }
  .hm-grid > .proof { font-size: 15px; }
}

/* Palavras em destaque do h1 (órbita / digital.): degradê fixo branco ->
   amarelo -> laranja.
   O seletor precisa ser `.hero h1 em.hero-grad` e não só `.hero-grad`: o
   home.css tem `.hero h1 em { background: linear-gradient(105deg, coral, azure) }`,
   que é mais específico e ganharia da classe sozinha — era por isso que as
   palavras estavam saindo laranja/azul em vez do degradê desta regra. */
.hero h1 em.hero-grad {
  background-image: linear-gradient(120deg, #FFFFFF 0%, #FDE9B7 45%, #FFD3A6 68%, #FFA26E 85%, #FF8C57 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hm-grid > .proof { grid-area: proof; margin-top: 0; font-size: 14.5px; color: var(--text-on-ink-body); }
.hm-grid > .proof span { max-width: 40ch; }

.hm-chip {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-on-ink); background: rgba(255,255,255,.05);
  border: 1px solid var(--ink-border); border-radius: var(--radius-pill);
  padding: 7px 15px 7px 12px; margin-bottom: 20px;
  animation: lume-rise .9s .05s var(--ease-out) both;
}
.hm-chip i { width: 7px; height: 7px; border-radius: 50%; background: #3FCF8E; box-shadow: 0 0 0 0 rgba(63,207,142,.5); animation: hm-pulse 2.4s var(--ease-in-out) infinite; }
@keyframes hm-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63,207,142,.45); }
  60% { box-shadow: 0 0 0 7px rgba(63,207,142,0); }
}

.hm-plain-link { color: var(--azure-soft); font-size: 15px; text-decoration: none; border-bottom: 1px solid rgba(111,160,232,.35); padding-bottom: 2px; }
.hm-plain-link:hover { color: var(--text-on-ink); border-bottom-color: currentColor; }

/* ---- Palco do MacBook ---- */
.hm-stage {
  grid-area: stage;
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  animation: lume-rise 1s .3s var(--ease-out) both;
}
.hm-stage::before {
  /* halo atrás do notebook, sai de cena junto com o resto do brilho no mobile */
  content: ''; position: absolute; z-index: 0;
  left: 50%; top: 44%; width: 118%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(42,111,219,.26) 0%, rgba(42,111,219,.07) 46%, rgba(42,111,219,0) 70%);
  filter: blur(24px); pointer-events: none;
}

.mac {
  --sc-left: 10.807%;   /* 498 / 4608  */
  --sc-top: 2.131%;     /* 57 / 2675   */
  --sc-width: 78.385%;  /* 3612 / 4608 */
  --sc-height: 86.318%; /* 2309 / 2675 */
  --chrome-h: 27px;
  --rx: 0deg; --ry: 0deg;

  position: relative; z-index: 1;
  width: 100%; max-width: clamp(360px, 45vw, 652px);
  aspect-ratio: 4608 / 2675;
  transform: perspective(1800px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .6s var(--ease-out);
  will-change: transform;
}
.mac::after {
  /* sombra de contato no chão, logo abaixo da base do notebook */
  content: ''; position: absolute; z-index: -1;
  left: 6%; right: 6%; bottom: -5%; height: 12%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 72%);
  filter: blur(12px); pointer-events: none;
}
.mac-shell { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 3; pointer-events: none; }

.mac-screen {
  position: absolute; z-index: 1;
  left: var(--sc-left); top: var(--sc-top);
  width: var(--sc-width); height: var(--sc-height);
  overflow: hidden; background: #0E1016;
  border-radius: 4px;
}

/* Barra de navegador falsa: dá o contexto de site no ar e, de quebra, cobre
   o notch da tela do MacBook. */
.mac-chrome {
  position: absolute; inset: 0 0 auto 0; z-index: 2;
  height: var(--chrome-h);
  display: flex; align-items: center; gap: 9px;
  padding: 0 10px;
  background: #0B0C10; border-bottom: 1px solid rgba(255,255,255,.07);
}
.mac-dots { display: flex; gap: 5px; flex-shrink: 0; }
.mac-dots span { width: 7px; height: 7px; border-radius: 50%; opacity: .9; }
.mac-dots span:nth-child(1) { background: #F05C51; }
.mac-dots span:nth-child(2) { background: #E8B027; }
.mac-dots span:nth-child(3) { background: #2FB84A; }
.mac-url {
  display: flex; align-items: center; gap: 5px;
  height: 15px; padding: 0 12px; max-width: 62%;
  background: #22262F; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .02em; color: #9AA4BC;
  white-space: nowrap; overflow: hidden;
}
.mac-url svg { width: 8px; height: 8px; flex-shrink: 0; opacity: .8; }

/* Área útil: iframe escalado, com um print estático por baixo enquanto o
   site de verdade não termina de carregar. */
.mac-view { position: absolute; inset: var(--chrome-h) 0 0 0; overflow: hidden; background: #F6F4F0; }
.mac-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; background: #F6F4F0; transition: opacity .5s var(--ease-out), visibility 0s linear .5s; }
.mac-slide.active { opacity: 1; visibility: visible; transition: opacity .5s var(--ease-out); }
.mac-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: opacity .5s var(--ease-out); }
.mac-loaded .mac-frame { opacity: 1; }
.mac-loaded .mac-poster { opacity: 0; }
.mac-slide.mac-loaded .mac-frame { opacity: 1; }
.mac-slide.mac-loaded .mac-poster { opacity: 0; }
.mac-frame {
  position: absolute; left: 0; top: 0;
  width: 1280px; height: 800px;
  border: 0; display: block;
  transform-origin: top left;
  opacity: 0; transition: opacity .6s var(--ease-out);
  pointer-events: none;
}
.mac-url-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Legenda embaixo do notebook ---- */
.hm-caption {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
  font-size: 14px; color: var(--text-on-ink-body); text-align: center;
}
.hm-caption b { color: var(--text-on-ink); font-weight: 600; }
.hm-caption a { color: var(--azure-soft); text-decoration: none; border-bottom: 1px solid rgba(111,160,232,.35); padding-bottom: 1px; }
.hm-caption a:hover { color: var(--text-on-ink); border-bottom-color: currentColor; }

@media (max-width: 1080px) {
  .hm-copy h1 { max-width: 18ch; }
  .hm-copy .lead { max-width: 52ch; }
}

/* A barra do navegador falso encolhe junto com o notebook, se não ela vira
   uma tarja grossa demais em cima da tela pequena. */
@media (max-width: 900px) {
  .mac { --chrome-h: 21px; }
  .mac-url { height: 12px; font-size: 8px; padding: 0 9px; }
  .mac-dots span { width: 5.5px; height: 5.5px; }
}
@media (max-width: 560px) {
  .mac { --chrome-h: 18px; }
  .mac-url { display: none; }
  .hm-caption { font-size: 13px; }
}

/* ---- Variante mobile + tablet ----
   Aplicada direto via classe .hm-bg no <body> (hoje é o padrão da home). Em
   vez de o MacBook descer pra baixo do texto, ele vira o fundo da hero:
   ancorado na tela inteira, bem maior que os textos, deslocado pra direita.
   O overlay (.hm-overlay, na hero inteira) escurece por cima pra manter o
   contraste.

   ---- Escala de tipografia ----
   Um conjunto só de fórmulas cobre de 320px até 1024px, no lugar dos quatro
   blocos de breakpoint que se sobrescreviam (e brigavam entre si). Cada
   tamanho é um min() de quatro limites, nesta ordem de leitura:

     min( teto ,  max(piso, Xvw) ,  Yvh ,  Zvw )
          |             |             |     |
          |             |             |     +- encolhe em aparelho estreito (<=360px)
          |             |             +------- segura o texto em tela baixa (celular deitado)
          |             +--------------------- mantém o valor do celular e só cresce
          |                                    quando a largura justifica (tablet)
          +----------------------------------- nunca passa disso, nem em tablet grande

   Os pisos (h1 53px, botão 17px) são os tamanhos que já estão em produção e
   foram aprovados no celular (Samsung M14, 360px de largura). Qualquer
   mexida aqui precisa continuar caindo nesses números em 360px.
   O piso do lead foi ajustado pra 25px (era 31px no original, que ocupava
   ~45% da altura da tela no M14 sozinho; 17-22px ficou pequeno demais a
   pedido — 25px é o meio-termo, ainda dando 3:1 pro h1 de 53px). */
@media (max-width: 1024px) {
  .hero-mac {
    padding: clamp(100px, 12svh, 132px) 0 clamp(44px, 6svh, 72px);
    align-items: stretch;
  }

  /* a hero vira um flex column e o container (filho dela) estica pela altura
     toda; o grid dentro do container idem. */
  .hm-bg .hero-mac { display: flex; flex-direction: column; }
  .hm-bg .hero-mac .container {
    position: static; z-index: auto;
    flex: 1; width: 100%;
    display: flex; flex-direction: column;
  }

  /* Texto e prova social andam juntos: as duas linhas do grid são `auto` e o
     bloco inteiro é centralizado no espaço que sobra (align-content).
     Antes o grid era `1fr auto` e a .hm-copy usava justify-content:space-between,
     o que esparramava h1 / lead / botões pela dobra inteira: no iPad abria mais
     de 200px de vazio entre o título e o texto, e no celular empurrava os
     botões pra fora da tela. */
  .hm-bg .hm-grid {
    position: relative;
    flex: 1; width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "copy" "proof";
    align-content: center;
    align-items: start;
    gap: 0;
  }
  .hm-bg .hm-copy,
  .hm-bg .hm-grid > .proof { position: relative; z-index: 3; }
  .hm-bg .hm-copy { display: block; text-align: left; }

  .hm-bg .hm-copy h1 {
    font-size: min(80px, max(53px, 9.4vw), 9.6svh, 14.8vw);
    max-width: 18ch;
    /* sombra suave nas palavras sólidas, pra separar do notebook atrás */
    text-shadow: 0 1px 3px rgba(3,5,12,.4);
  }
  /* "órbita" e "digital." são pintadas com background-clip:text + color:transparent.
     Nesse caso o text-shadow não fica atrás do glifo: ele aparece ATRAVÉS dele
     (o glifo é transparente), e era isso que deixava o laranja e o azul mais
     escuros no celular e no tablet do que no PC, que não tem sombra nenhuma.
     A separação aqui vem de um drop-shadow, que é aplicado no resultado já
     pintado e fica só no contorno, sem sujar o degradê. */
  .hm-bg .hm-copy h1 em.hero-grad {
    text-shadow: none;
    filter: drop-shadow(0 1px 3px rgba(3,5,12,.55));
  }
  .hm-bg .hm-copy .lead {
    font-size: min(32px, max(25px, 5.2vw), 4.5svh, 7.2vw);
    max-width: none;
    margin-top: clamp(14px, 2.6svh, 30px);
    color: var(--text-on-ink);
    /* lead (texto comum, não degradê) leva sombra forte pra legibilidade */
    text-shadow: 0 2px 26px rgba(3,5,12,.75), 0 1px 4px rgba(3,5,12,.6);
  }
  /* Botões centralizados e quebrando em quantas linhas precisar, sem nunca
     partir o rótulo dentro do botão. Padding em em pra crescer junto com a
     fonte e manter a altura de toque proporcional (~2,9em ≈ 50-70px). */
  .hm-bg .hm-copy .ctas {
    margin-top: clamp(20px, 4.4svh, 46px);
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  }
  .hm-bg .hm-copy .ctas .btn {
    font-size: max(14px, min(24px, max(17px, 3vw), 3.1svh, 5vw));
    padding: .98em 1.38em;
  }
  .hm-bg .hm-grid > .proof {
    margin-top: clamp(18px, 3.4svh, 42px);
    justify-content: center; text-align: center;
    font-size: max(13px, min(19px, max(15px, 2.2vw), 2.2svh, 4.4vw));
  }
  .hm-bg .hm-grid > .proof span { max-width: 46ch; }
  .hm-bg .hero .proof .dots span { width: clamp(24px, 6vw, 34px); height: clamp(24px, 6vw, 34px); }

  .hm-bg .hm-stage {
    position: absolute; inset: 0; z-index: 1;
    justify-content: center;
    animation: none;
  }
  .hm-bg .hm-stage .mac {
    width: min(145.6%, 640px);
    max-width: none;
    margin: 0;
    transform: translateX(16%);
  }
  .hm-bg .hm-overlay {
    display: block;
    position: absolute; inset: 0; z-index: 2;
    /* centro bem mais claro pra deixar o notebook aparecer atrás do texto
       (pedido do mobile — Samsung M14), sem perder contraste: as bordas
       seguem escuras pra nenhum brilho do fundo vazar na volta da hero */
    background: radial-gradient(74% 68% at 50% 44%, rgba(3,5,12,.47) 0%, rgba(3,5,12,.65) 50%, rgba(3,5,12,.75) 80%, rgba(3,5,12,.94) 100%);
    pointer-events: none;
  }
  .hm-bg .hm-stage .mac::after,
  .hm-bg .hm-stage::after,
  .hm-bg .hm-stage::before,
  .hm-bg .hm-caption,
  .hm-bg .mac-unlock,
  .hm-bg .mac-exit { display: none; }

  /* Tablet: o notebook tambem acompanha a ALTURA da tela. So com o teto de
     800px de largura ele virava uma faixa estreita no meio de um iPad Pro em
     pe (1366px de altura), com vazio escuro em cima e embaixo. */
  @media (min-width: 641px) {
    .hm-bg .hm-stage .mac { width: max(min(145.6%, 640px), 62.4vh); }
  }

  /* Celular estreito (<=550px): notebook ainda mais pra direita, pra
     reaproveitar a largura pequena. */
  @media (max-width: 550px) {
    .hm-bg .hm-stage .mac { transform: translateX(24%); }
  }

  /* Aparelho bem estreito (<=344px: Galaxy Fold fechado, iPhone SE 1a geracao).
     Os pisos de 53/25px foram calibrados em 360px; aqui eles deixariam cerca de
     9 palavras por linha, entao o texto desce abaixo do piso de proposito. */
  @media (max-width: 344px) {
    .hm-bg .hm-copy h1 { font-size: 13.6vw; }
    .hm-bg .hm-copy .lead { font-size: 6.8vw; }
    .hm-bg .hm-copy .ctas .btn { font-size: 4.8vw; }
  }
}

/* Fallback: se a classe .hm-bg sair do <body>, a hero volta pro empilhamento
   simples (texto, notebook, prova social) em vez de quebrar. */
@media (max-width: 1024px) {
  .hm-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "stage" "proof";
    gap: 36px;
  }
  .hm-copy .lead { color: var(--text-on-ink); }
  .hm-stage .mac { width: 100%; max-width: 420px; margin: 0 auto; }
}

/* Botão da hero nunca quebra em mais de uma linha */
.hero-mac .ctas .btn { white-space: nowrap; flex-shrink: 0; }

.hm-overlay { display: none; }

/* ---- Final da home (escopo .ending-jup) ----
   O planeta three.js estica pelo wrapper .ending inteiro e atravessa a
   divisa: metade no .espaco (acima) e metade sobre o azul escuro do footer,
   que perde a imagem de fundo. O footer sobe as duas coisas com o próprio
   z-index; o planeta fica no meio, atrás do texto. */
.ending-jup .ending { position: relative; overflow: hidden; background: linear-gradient(180deg, #000 0%, #060B18 40%, #0B132B 100%); }
.ending-jup .ending::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(2,4,10,.82) 0%, rgba(2,4,10,.58) 45%, rgba(2,4,10,.82) 100%);
}
.ending-jup .espaco { min-height: clamp(380px, 52vh, 660px); background: transparent; }
.ending-jup .hero-jup {
  z-index: 1; opacity: 1;
  -webkit-mask-image: radial-gradient(ellipse farthest-side at 50% 38%, #000 38%, transparent 87%);
  mask-image: radial-gradient(ellipse farthest-side at 50% 38%, #000 38%, transparent 87%);
}
.ending-jup .hero-jup-static { object-position: 50% 38%; }
.ending-jup .hero-jup-glow { left: 50%; top: 45%; z-index: 0; }
.ending-jup footer { position: relative; z-index: 3; background: none; border-top: none; }

@media (max-width: 900px) {
  .ending-jup .espaco { min-height: 46vh; }
}

@media (max-width: 640px) {
  /* No mobile o footer empilha (colunas viram 1 por linha — ver core.css
     footer .foot-grid), então a altura real de .ending varia demais com o
     conteúdo (fonte, tradução, zoom) pra servir de referência de posição.
     .hero-jup deixa de esticar por inset:0 (que o amarrava à altura inteira
     de .ending, planeta incluso footer todo) e ganha uma altura fixa, só
     pra conter a imagem — assim o planeta cai sempre no mesmo lugar perto
     do topo da seção, não importa quantas linhas o footer acabe tendo. */
  .ending-jup .hero-jup {
    top: 0; left: 0; right: 0; bottom: auto;
    height: 420px;
    -webkit-mask-image: radial-gradient(ellipse farthest-side at 50% 14%, #000 38%, transparent 87%);
    mask-image: radial-gradient(ellipse farthest-side at 50% 14%, #000 38%, transparent 87%);
  }
  /* object-position em px (não %) por ela não escalar com a altura do bloco
     acima: a imagem fica a 92px fixos do topo, sempre, antes do scale(.24)
     abaixo virar isso em ~22px reais — perto do topo da seção. */
  .ending-jup .hero-jup-static { object-position: 50% 92px; }
  .ending-jup .hero-jup-glow { top: 57px; }
  /* sem three.js no mobile (ver jupiter.js), só o print estático do planeta:
     o escurecimento do desktop deixava ele quase invisível aqui */
  .ending-jup .ending::after {
    background: linear-gradient(180deg, rgba(2,4,10,.5) 0%, rgba(2,4,10,.22) 45%, rgba(2,4,10,.58) 100%);
  }
  .ending-jup footer { padding-top: 56px; }
  .ending-jup .espaco { min-height: 16vh; }
  .ending-jup footer .foot-cta h3 { font-size: 38px; }
  /* planeta menor no mobile: encolhe só a imagem estática (que nunca coexiste
     com o canvas 3D — ver jupiter.js), sem transformar o wrapper .hero-jup,
     pra não mexer na composição do WebGL no desktop */
  .ending-jup .hero-jup-static { transform: scale(.24); transform-origin: 50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mac { transition: none; }
  .hm-chip i { animation: none; }
  .hero-grad { animation: none; background-position: 22% 50%; }
}