/* ==========================================================================
   Base dos quatro sites de DEMONSTRAÇÃO da Peter Maker (28/09/2026)
   Casa Moka (café, roda nas telas do hero), Rumo Norte (turismo), Alto Lar
   (imobiliária) e Vértice (painel de investimentos). Cada um tem o seu
   style.css; aqui fica só o que os quatro fazem igual:

     - Manrope hospedada no próprio site (nenhuma conexão externa);
     - trava de seleção e de zoom, barra de rolagem escondida e cursor de
       mira — as mesmas decisões do site de fora (24 e 28/09);
     - o aviso "esperando imagem" (.espera), que o demo.js troca pela foto
       assim que o arquivo aparecer na pasta img/ do demo;
     - a entrada dos blocos (.surge) e a pausa da prévia da Capacidade.

   Demo claro põe class="demo--claro" no <html>: a mira vira a preta.
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../../assets/fontes/manrope-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../../assets/fontes/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;          /* sem zoom de dois toques */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; display: none; }

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
[hidden] { display: none !important; }

/* Nada de selecionar (os campos de formulário ficam de fora, senão não dá
   pra corrigir o que se digita) */
body, a, button {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, select {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

/* Cursor de mira ---------------------------------------------------------------
   O de CSS (32px) é a reserva de quando o JS não roda; com JS, o cursor some
   e a .mira desenhada (40px, pulsa sobre o que é clicável) segue o ponteiro.
   Nas telas do hero quem desenha a mira é a página de fora.
   Só com mouse: no celular a imagem era baixada sem nunca aparecer. */
@media (hover: hover) and (pointer: fine) {
  html, html * {
    cursor: url(../../assets/imagens/mira-branca.png) 16 16, crosshair !important;
    cursor: -webkit-image-set(url(../../assets/imagens/mira-branca.png) 1x, url(../../assets/imagens/mira-branca@2x.png) 2x) 16 16, crosshair !important;
    cursor: image-set(url(../../assets/imagens/mira-branca.png) 1x, url(../../assets/imagens/mira-branca@2x.png) 2x) 16 16, crosshair !important;
  }
  html.demo--claro, html.demo--claro * {
    cursor: url(../../assets/imagens/mira-preta.png) 16 16, crosshair !important;
    cursor: -webkit-image-set(url(../../assets/imagens/mira-preta.png) 1x, url(../../assets/imagens/mira-preta@2x.png) 2x) 16 16, crosshair !important;
    cursor: image-set(url(../../assets/imagens/mira-preta.png) 1x, url(../../assets/imagens/mira-preta@2x.png) 2x) 16 16, crosshair !important;
  }
}
html.tem-mira, html.tem-mira * { cursor: none !important; }

.mira {
  position: fixed;
  left: 0; top: 0;
  z-index: 2147483647;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  will-change: transform;
}
.mira.is-visivel { opacity: 1; }
.mira__img { width: 100%; height: 100%; background: url(../../assets/imagens/mira-branca-96.png) center / contain no-repeat; }
.demo--claro .mira__img { background-image: url(../../assets/imagens/mira-preta-96.png); }
.mira.is-alvo .mira__img { animation: mira-pulsa .9s ease-in-out infinite; }
@keyframes mira-pulsa {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}

/* Esperando imagem --------------------------------------------------------------
   Todo lugar que vai ter foto nasce assim:
     <div class="espera" data-img="img/nome" data-alt="o que a foto mostra"></div>
   O demo.js procura img/nome.webp, .jpg, .png e .jpeg, nessa ordem. Achou,
   põe a foto no lugar do aviso (cobrindo a caixa, como object-fit: cover).
   Não achou, o aviso fica, com o nome do arquivo que está faltando.
   As cores vêm de --espera-* de cada demo. */
.espera {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 60px;
  color: var(--espera-tinta, rgba(255, 255, 255, .7));
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, var(--espera-listra, rgba(255, 255, 255, .035)) 14px 28px),
    var(--espera-fundo, rgba(255, 255, 255, .05));
  outline: 1.5px dashed var(--espera-borda, rgba(255, 255, 255, .28));
  outline-offset: -8px;
}
.espera__aviso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  text-align: center;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.25;
}
.espera__aviso svg { width: 26px; height: 26px; opacity: .8; }
.espera__aviso code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  opacity: .75;
}
.espera--mini .espera__aviso { gap: 3px; padding: 6px; font-size: 11px; }
.espera--mini .espera__aviso svg { width: 18px; height: 18px; }
.espera--mini .espera__aviso code { display: none; }

.espera.is-ok { background: none; outline: 0; display: block; }
.espera.is-ok > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: espera-chega .5s ease both;
}
.espera--contem.is-ok > img { object-fit: contain; }
@keyframes espera-chega { from { opacity: 0; } to { opacity: 1; } }

/* Entrada dos blocos ------------------------------------------------------------ */
.surge { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.surge--atraso { transition-delay: .12s; }
.surge.is-visivel { opacity: 1; transform: none; }

/* Prévia da Capacidade fora da tela: tudo parado. */
html.pausado *, html.pausado *::before, html.pausado *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .surge { opacity: 1; transform: none; transition: none; }
  .mira.is-alvo .mira__img { animation: none; transform: scale(1.15); }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}