/* Lancei · prévia do topo · opção 3: a parede de monitores.
   A parede curva renderizada no Blender cobre o topo (no computador, presa à direita; no celular, de frente embaixo do
   texto). Os quadros têm o buraco das telas transparente: atrás deles entram os sites do portfólio (telas.js), e a tela
   grande do centro roda o comando no terminal antes de abrir a Seta Auto Escola. Os números ficam em placas lima por cima
   das três telas acesas. O texto fica num painel de vidro opaco, sempre legível em cima da parede. */

.topo-3 { display: grid; background: #0b0b0b; }
.topo-3 .dentro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  min-height: 100svh;
  padding-top: var(--altura-cabecalho);
  padding-bottom: 1.5rem;
  box-sizing: border-box;
}

/* ---------- O painel de vidro ---------- */

.topo-3__painel {
  position: relative;
  z-index: 4;
  width: min(100%, 31rem);
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: calc(var(--raio-vidro) * 1.25);
  background:
    linear-gradient(160deg, rgba(30, 30, 30, 0.84), rgba(9, 9, 9, 0.9)) padding-box,
    var(--cromo) border-box;
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  box-shadow:
    inset 0 0 0 1px rgba(245, 245, 240, 0.1),
    inset 0 -28px 50px -34px rgba(198, 255, 0, 0.45),
    0 40px 80px -30px #000,
    0 0 0 1px rgba(11, 11, 11, 0.8);
}
.topo-3__painel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 42%;
  border-radius: inherit;
  border-bottom-left-radius: 50% 18%;
  border-bottom-right-radius: 50% 18%;
  background: linear-gradient(180deg, rgba(245, 245, 240, 0.14), rgba(245, 245, 240, 0));
  pointer-events: none;
}
.topo-3__painel .titulo-topo { margin: 0.9rem 0 1rem; font-size: clamp(2.4rem, 1.4rem + 2.3vw, 4rem); }
.topo-3__painel .texto-topo { margin: 0 0 1.6rem; }

/* ---------- A parede (o palco dos quadros) ---------- */

.parede {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 50%;
  width: max(100%, 160svh);
  aspect-ratio: 16 / 10;
  translate: 0 -50%;
  pointer-events: none;
}
.parede.medido { right: auto; bottom: auto; translate: none; aspect-ratio: auto; }
.parede__telas { position: absolute; z-index: 1; inset: 0; isolation: isolate; }
.parede__quadros { position: absolute; z-index: 2; inset: 0; }
.parede__quadros--cel { display: none; }

/* ---------- O terminal da tela do centro (base 1440 × 900, dentro da tela) ---------- */

.terminal3 {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 0.9em 1.3em 1.1em;
  box-sizing: border-box;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(198, 255, 0, 0.09), transparent 60%),
    repeating-linear-gradient(180deg, rgba(245, 245, 240, 0.035) 0 2px, transparent 2px 6px),
    #070807;
  color: #d9f7a0;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
  font-size: 48px;
  line-height: 1.32;
}
.terminal3[hidden] { display: none; }
.terminal3__barra {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 0 0.6em;
  padding-bottom: 0.45em;
  border-bottom: 1px solid rgba(198, 255, 0, 0.25);
  color: rgba(245, 245, 240, 0.62);
  font-size: 0.72em;
}
.terminal3__barra i { width: 0.7em; height: 0.7em; border-radius: 50%; background: rgba(245, 245, 240, 0.25); }
.terminal3__barra i:first-child { background: var(--lima); box-shadow: 0 0 0 0.12em rgba(198, 255, 0, 0.3); }
.terminal3__barra span { margin-left: 0.5em; }
.terminal3__linhas { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; overflow: hidden; }
.terminal3__linhas p { margin: 0; overflow-wrap: anywhere; }
.terminal3__cmd b { color: var(--lima); font-weight: 700; }
.terminal3__cmd span { color: rgba(245, 245, 240, 0.6); }
.terminal3__cmd em { font-style: normal; color: var(--papel); }
.terminal3__progresso { flex: none; height: 0.5em; margin: 0.35em 0 0.25em; border-radius: 99px; background: rgba(245, 245, 240, 0.14); overflow: hidden; }
.terminal3__progresso i { display: block; height: 100%; background: var(--lima); transform: scaleX(0); transform-origin: left; will-change: transform; }
.terminal3__ok { color: var(--lima); font-weight: 700; }
.terminal3 .cursor::after { content: '▌'; color: var(--lima); animation: pisca 1s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }
/* a luz que desce quando o site abre */
/* o brilho é um degradê (sem sombra borrada) e a faixa anda como camada própria */
.terminal3__luz {
  position: absolute;
  left: 0;
  right: 0;
  top: -70px;
  height: 150px;
  background: linear-gradient(180deg, rgba(198, 255, 0, 0) 0, rgba(198, 255, 0, 0.45) 40%, var(--lima) 47%, var(--lima) 53%, rgba(198, 255, 0, 0.45) 60%, rgba(198, 255, 0, 0) 100%);
  opacity: 0;
  will-change: transform, opacity;
}

/* ---------- Os números nas três telas acesas ---------- */

.parede__numeros { position: absolute; z-index: 3; inset: 0; display: block; margin: 0; padding: 0; list-style: none; }
/* sem JS: os números já estão na imagem parada; os rótulos ficam embaixo das telas */
.parede__numeros .numero {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: block;
  padding: 0;
  border-radius: 0;
  transform: translateX(-50%);
}
.parede__numeros .numero strong { display: none; }
.parede__numeros .numero__rotulo {
  display: block;
  padding: 0.18em 0.6em;
  border-radius: 999px;
  background: rgba(11, 11, 11, 0.72);
  box-shadow: inset 0 0 0 1px rgba(245, 245, 240, 0.14);
  color: var(--papel);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
/* com JS: cada número é uma placa lima de 800 × 500 entortada sobre a tela acesa (cobre o que está pintado nela) */
.parede__numeros.encaixado .numero {
  left: 0;
  top: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.1em;
  width: 800px;
  height: 500px;
  border-radius: 46px;
  transform-origin: 0 0;
  /* o brilho de cima e a sombra de baixo em degradê, sem sombra borrada (06/11, fluidez: a GPU refazia o desfoque
     das três placas a cada mudança e travava o filme); a placa é uma camada só dela (a escala não se refaz) */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0, rgba(255, 255, 255, 0) 22%),
    linear-gradient(0deg, rgba(40, 60, 0, 0.5) 0, rgba(40, 60, 0, 0) 30%),
    radial-gradient(85% 85% at 50% 42%, #e2ff6a 0%, var(--lima) 42%, #86b000 100%);
  box-shadow: inset 0 0 0 6px rgba(11, 11, 11, 0.35);
  color: var(--fundo);
  visibility: hidden;
  will-change: transform;
}
.parede__numeros.encaixado .numero.aqui { visibility: visible; }
.parede__numeros.encaixado .numero strong {
  display: block;
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--fundo);
  font-size: 200px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.parede__numeros.encaixado .numero__rotulo {
  padding: 0;
  background: none;
  box-shadow: none;
  color: var(--fundo);
  font-size: 56px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

/* ---------- O filme liso (06/11, fluidez): o que muda a cada quadro não refaz a página inteira ---------- */
/* a letra dos números, a do terminal e o selo mudam em degraus; com o contain, o layout fica dentro da peça (antes,
   no celular, cada troca refazia o layout das 1.260 peças da página: 100 ms por quadro) */
.anima .tela-js,
.anima .terminal3,
.parede__numeros.encaixado,
.parede__numeros.encaixado .numero { contain: strict; }
/* o painel sai em camada própria: a sombra borrada se pinta uma vez, não a cada quadro da saída */
.anima .topo-3__painel { will-change: opacity, translate; }
/* a fibra fica atrás do filme na abertura: escondida até a seção 2 entrar, a luz que desliza nela (--luz) não repinta
   a tela toda por trás do vídeo */
.anima .palco:not(:has(.motivos.ativa)) .fundo-carbono { visibility: hidden; }

/* ---------- A entrada ao abrir ---------- */

.anima .topo-3__painel { animation: sobe 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
/* com movimento, o vidro não desfoca o que passa por trás (06/11, fluidez: o desfoque refeito a cada quadro do filme
   derrubava os 60 fps); o fundo fica mais fechado no lugar */
.anima .topo-3__painel {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background:
    linear-gradient(160deg, rgba(30, 30, 30, 0.93), rgba(9, 9, 9, 0.96)) padding-box,
    var(--cromo) border-box;
}
.anima .parede { animation: chega 1200ms cubic-bezier(0.2, 0.7, 0.2, 1) 80ms both; }
@keyframes sobe { from { opacity: 0; transform: translateY(24px); } }
@keyframes chega { from { opacity: 0; } }
.anima .topo.saiu { visibility: hidden; }

/* ---------- Em pé: o celular e o tablet de pé (o painel em cima, a parede de frente embaixo) ---------- */

@media (max-width: 47.99rem), (max-aspect-ratio: 4/5) {
  .topo-3 .dentro { align-content: start; padding-top: calc(var(--altura-cabecalho) + 0.5rem); }
  .topo-3__painel { width: 100%; padding: 1.15rem 1.15rem 1.25rem; }
  .topo-3__painel .titulo-topo { margin: 0.55rem 0 0.6rem; font-size: clamp(2.15rem, 9.6vw, 3.4rem); }
  .topo-3__painel .texto-topo { margin: 0 0 1rem; font-size: 0.95rem; }
  .topo-3__painel .botoes { flex-wrap: nowrap; gap: 0.5rem; }
  .topo-3__painel .botao { padding-inline: 0.9rem; font-size: 0.9rem; white-space: nowrap; }
  .parede { left: 50%; right: auto; top: auto; bottom: 0; width: 100%; aspect-ratio: 780 / 1400; translate: -50% 0; }
  .parede__quadros--pc { display: none; }
  .parede__quadros--cel {
    display: block;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%);
    mask-image: linear-gradient(180deg, transparent 0, #000 10%);
  }
  .parede__numeros .numero { left: var(--xc); top: var(--yc); }
  .parede__numeros .numero[data-tela="tv-4"] { display: none; }
  .parede__numeros.encaixado .numero[data-tela="tv-4"] { display: grid; }
  .parede__numeros .numero__rotulo { font-size: 0.75rem; }
  /* (10/11, o Lighthouse) em pé, a entrada parte de 0,01 e não de 0: igual para o olho, mas o navegador só conta como
     "a maior pintura" (o LCP) o que pinta com opacidade acima de zero. Partindo de 0, a imagem parada ficava de fora e
     quem levava o LCP era o 1º quadro do vídeo, que está invisível e só chega depois do MP4 inteiro. No computador a
     imagem cobre a janela toda e o navegador não a conta de jeito nenhum: lá fica o 0 (com 0,01 o ajuste dos números
     das telas lima entraria na conta do CLS). */
  .anima .parede { animation-name: chega-em-pe; }
}
@keyframes chega-em-pe { from { opacity: 0.01; } }
@media (max-width: 22rem) {
  .topo-3__painel .botao { padding-inline: 0.7rem; font-size: 0.85rem; }
  .topo-3__painel .botoes { flex-wrap: wrap; }
}

/* os dois jogos de telas (o do computador e o do celular); só um aparece */
.parede__jogo { position: absolute; inset: 0; }
.terminal3__luz { z-index: 3; }

/* ---------- O filme do topo (06/11, fluidez: "no mínimo 60 fps") ----------
   No computador, a parede é um vídeo (a ida e a volta) por cima do pôster. Os sites já vêm gravados nas telas; por cima
   do vídeo ficam só a tela do centro (o terminal, o selo e o desligar de CRT) e as placas dos números. A tela do centro
   é transparente até o CRT: aí ela fica preta e a captura da Seta encolhe em linha. */
.parede__filme {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  pointer-events: none;
}
.parede__filme.ativo { opacity: 1; }
.parede.em-video .parede__telas { z-index: 3; }
.parede.em-video .parede__numeros { z-index: 4; }
.parede.em-video .tela-js { background: transparent; }
.parede.em-video .tela-js > img.ativo { opacity: 0; }
.parede.em-video .tela-js.crt { background: #050505; }
.parede.em-video .tela-js.crt > img.ativo { opacity: 1; }

/* ---------- Menos rolagem (09/11, o Kit, pedido do Pedro: "menos scroll"): só no site 3, sem tirar conteúdo ----------
   Os respiros das seções, dos títulos e dos blocos de baixo ficam mais curtos; no celular, os 8 serviços e os 4
   depoimentos viram uma faixa de lado (como as etapas do "Como"), com as bolinhas da vez, e as cidades ficam em duas
   colunas. A medida antes e depois está no tmp\kit-site3 (medir-site3.mjs) */
.site-r--3 .secao:not(.projetos-r--carrossel):not(.final-r) { padding-block: clamp(2.5rem, 4.4vw, 3.5rem); }
.site-r--3 .secao__cabeca { margin-bottom: clamp(1.5rem, 3.6vw, 2.5rem); }
.site-r--3 .destaque-cardapio { margin-top: clamp(1.25rem, 3vw, 2rem); }
.site-r--3 .capsula { padding-block: clamp(1.25rem, 3vw, 2.25rem); }
.site-r--3 .depoimentos { margin-top: clamp(2rem, 4.4vw, 3rem); }
.site-r--3 .final-r__perguntas { padding-top: clamp(2.5rem, 4.4vw, 3.5rem); }
.site-r--3 .geo { margin-top: clamp(1.75rem, 3.6vw, 2.5rem); }
.site-r--3 .rodape-r { padding-top: clamp(2.5rem, 5vw, 3.75rem); }
.site-r--3 .rodape-r__logo { margin-top: clamp(1.5rem, 4vw, 2.75rem); }
@media (min-width: 48rem) {
  .site-r--3 .destaque-cardapio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 63.99rem) {
  .site-r--3 .projetos-r--carrossel .carrossel-preso__palco { padding-block: clamp(2.75rem, 7vw, 4.5rem); }
}
@media (max-width: 47.99rem) {
  .site-r--3 .servicos-r__grade,
  .site-r--3 .depoimentos__lista {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(82%, 20rem); gap: 0.75rem;
    margin-inline: calc(-1 * var(--gutter)); padding: 0.25rem var(--gutter) 0.5rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .site-r--3 .servicos-r__grade::-webkit-scrollbar,
  .site-r--3 .depoimentos__lista::-webkit-scrollbar { display: none; }
  .site-r--3 .servico,
  .site-r--3 .depoimento { scroll-snap-align: start; }
  .site-r--3 .faixa-pontos { display: flex; justify-content: center; gap: 0.6rem; margin-top: 0.6rem; }
  .site-r--3 .faixa-pontos i { width: 8px; height: 8px; border-radius: 50%; background: rgba(245, 245, 240, 0.35); transition: background-color 0.3s var(--sai), transform 0.3s var(--sai); }
  .site-r--3 .faixa-pontos i.atual { background: var(--lima); transform: scale(1.35); }
  .site-r--3 .geo__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
}
.faixa-pontos { display: none; }

/* SEO (10/11): o Google renderiza sem rolar, numa janela da altura da página (9.893 px no celular). Nenhuma tela de
   verdade tem 4.500 px de altura; numa janela assim, a seção 2 fica à mostra, com os 4 motivos abertos.
   O html na frente: o reforma.css carrega depois deste arquivo e, com o mesmo peso, a regra dele ganharia. */
@media (min-height: 4500px) {
  html.anima .motivos { visibility: visible; opacity: 1 !important; }
  html.anima .sobre .motivos__grade > * { clip-path: none !important; } /* a lista entra por um recorte posto pelo opcao-3.js */
  html.anima .sobre .motivo {grid-area: auto; visibility: inherit; grid-template-rows: auto 1fr; opacity: 1 !important; transform: none !important; }
}