/* qge.bio/qgenegocios · topo: logo, título, sublinhado e o celular 3D */

/* ===== Topo ===== */
.logo { width: 156px; height: auto; margin-bottom: 26px; } /* abaixo disso o "Negócios Inteligentes" fica fino demais e perde nitidez */

.topo {
  /* --k é a escala do topo inteiro (o JS calcula pela largura; 1 = tela de 390px).
     Título, frase e celular crescem e encolhem juntos, então a posição de um
     em relação ao outro fica travada: só o fim de "encontro" passa por cima do celular. */
  position: relative;
  isolation: isolate;
  min-height: calc(350 * var(--u));
  margin-bottom: 22px;
}
.topo__texto { position: relative; z-index: 2; padding-top: calc(62 * var(--u)); }
.topo__texto h1 { text-shadow: 0 4px 24px rgba(17,17,20,0.9), 0 1px 4px rgba(17,17,20,0.8); }
.rotulo {
  display: block;
  font-size: calc(10 * var(--u)); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--azul);
  margin-bottom: 14px;
}
h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: calc(40 * var(--u));
  line-height: 0.95;
  letter-spacing: -0.06em;
  margin-bottom: 0;
}
h1 em { font-style: normal; color: var(--rosa); }

/* sublinhado à mão, igual ao site da QGE */
.sublinhado { position: relative; white-space: nowrap; }
.sublinhado__traco {
  position: absolute;
  left: -2%;
  bottom: -0.16em;
  width: 104%;
  height: 0.34em;
  overflow: visible;
  pointer-events: none;
}
.sublinhado__traco path {
  fill: none;
  stroke: var(--rosa);
  stroke-width: 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  clip-path: inset(-50% 100% -50% -5%);
  animation: traco 0.7s ease-out 0.5s forwards;
}
.sublinhado__traco path:nth-child(2) {
  stroke-width: 2.5;
  opacity: 0.75;
  animation-delay: 0.95s;
  animation-duration: 0.5s;
}
@keyframes traco { to { clip-path: inset(-50% -5% -50% -5%); } }
.subhero {
  max-width: calc(156 * var(--u));
  margin-top: calc(22 * var(--u));
  font-size: max(13px, calc(14 * var(--u))); font-weight: 300;
  line-height: 1.5;
  color: rgba(245,245,245,0.82);
  text-shadow: 0 2px 14px rgba(17,17,20,0.95), 0 1px 3px rgba(17,17,20,0.9);
}

/* Mockup 3D feito só com HTML e CSS.
   O aparelho é desenhado no dobro do tamanho e reduzido a 48% (scale3d) vezes o --k do topo,
   assim o navegador pinta a tela com o dobro de nitidez.
   A espessura é uma pilha de fatias; --rx, --ry e --rz são a inclinação e o JS
   soma um pouco de giro quando a pessoa rola a página ou passa o dedo por cima. */
.celular {
  position: absolute;
  top: calc(50 * var(--u));   /* começa abaixo da eyebrow */
  left: calc(170 * var(--u));
  width: calc(215 * var(--u));
  height: calc(288 * var(--u));
  perspective: calc(900 * var(--u));
  animation: flutuar 6s ease-in-out infinite alternate;
}
@keyframes flutuar { to { transform: translateY(-8px); } }

.aparelho {
  --rx: 24deg; --ry: -34deg; --rz: 11deg;
  --extra-x: 0deg; --extra-y: 0deg;
  --raio: 60px;
  position: absolute;
  left: 50%; top: 50%;
  width: 300px; height: 632px;
  margin: -316px 0 0 -150px;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--rx) + var(--extra-x))) rotateY(calc(var(--ry) + var(--extra-y))) rotateZ(var(--rz)) scale3d(calc(.48 * var(--k)), calc(.48 * var(--k)), calc(.48 * var(--k)));
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}

/* espessura: 18 fatias empurradas pra trás formam a lateral reta de titânio.
   A cor não muda da frente pra trás (a lateral é chapada, como no iPhone);
   ela muda AO LONGO do contorno: o degradê cônico escurece nos lados retos e
   acende reflexos cortando a borda nas quatro curvas, mais as linhas finas de antena.
   Só a primeira fatia é mais clara: é o filete de luz na quina da frente. */
.fatia {
  position: absolute; inset: 0;
  border-radius: var(--raio);
  background: conic-gradient(from 0deg at 50% 50%,
    #36363b 0deg, #36363b 10deg,
    #4e4e55 18deg, #6e6e76 24deg, #45454b 30deg, #2c2c30 36deg,       /* curva de cima, à direita */
    #3a3a40 39deg, #54545b 40deg, #3a3a40 41deg,                         /* linha de antena */
    #3c3c42 80deg, #414147 110deg, #3a3a40 138deg,
    #52525a 139.5deg, #3a3a40 141deg,                                    /* linha de antena */
    #333338 146deg, #55555c 152deg, #74747c 156deg, #3a3a40 161deg, #4c4c53 165deg, #2a2a2e 170deg, /* curva de baixo, à direita */
    #2a2a2e 185deg,
    #28282c 197deg, #4a4a51 204deg, #333338 209deg, #252529 214deg,     /* curva de baixo, à esquerda */
    #2c2c31 260deg, #303035 300deg,
    #2a2a2e 326deg, #505057 332deg, #38383d 338deg, #36363b 360deg);    /* curva de cima, à esquerda */
  filter: brightness(var(--b, 1));
  transform: translateZ(calc(var(--i) * -2px));
}
.fatia:last-of-type { background: #1a1a1d; box-shadow: 0 0 0 2px #0d0d0f; }
.botao-lateral {
  position: absolute;
  width: 6px;
  border-radius: 4px;
  background: linear-gradient(90deg, #a0a0a8, #3a3a40);
  transform: translateZ(-18px);
}
.botao-lateral--acao { left: -4px; top: 124px; height: 32px; }
.botao-lateral--vol1 { left: -4px; top: 180px; height: 56px; }
.botao-lateral--vol2 { left: -4px; top: 248px; height: 56px; }
.botao-lateral--power { right: -4px; top: 200px; height: 84px; }

.frente {
  position: absolute; inset: 0;
  padding: 12px;
  border-radius: var(--raio);
  background: #050506;
  box-shadow: inset 0 0 0 3px #6d6d74, inset 0 0 0 5px #1a1a1d;
  transform: translateZ(1px);
}
.celular__tela {
  position: relative;
  height: 100%;
  border-radius: calc(var(--raio) - 12px);
  overflow: hidden;
  /* respiro no topo: a ilha não corta a logo da Psiu quando a página carrega */
  background: linear-gradient(180deg, #e4f1fc 0%, #b2d8f7 44px, #a4d0f6 100%);
}
.celular__tela img {
  width: 100%;
  height: auto;
  margin-top: 44px;
  animation: rolar-tela 16s ease-in-out 1.2s infinite alternate;
}
@keyframes rolar-tela {
  0%, 8% { transform: translateY(0); }
  92%, 100% { transform: translateY(calc(-100% + 564px)); } /* 632 - 2 × 12 - 44 do respiro */
}
.ilha {
  position: absolute;
  top: 14px; left: 50%;
  width: 92px; height: 26px;
  margin-left: -46px;
  border-radius: 16px;
  background: #000;
  z-index: 2;
}
.reflexo {
  position: absolute; inset: 0;
  background: linear-gradient(118deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.22) 34%, rgba(255,255,255,0) 48%);
  background-size: 220% 100%;
  background-position: calc(60% + var(--brilho, 0%)) 0;
  transition: background-position .6s ease;
  pointer-events: none;
  z-index: 3;
}
.barra-inicio {
  position: absolute;
  bottom: 12px; left: 50%;
  width: 104px; height: 8px;
  margin-left: -52px;
  border-radius: 8px;
  background: rgba(0,0,0,0.55);
  z-index: 2;
}

/* luz batendo na quina: aro fino com brilho forte nos cantos, recortado só na borda */
.aro {
  position: absolute; inset: 0;
  border-radius: var(--raio);
  padding: 3px;
  background: conic-gradient(from 200deg,
    rgba(255,255,255,0.04) 0deg,
    rgba(255,255,255,0.4) 34deg,
    rgba(255,255,255,0.06) 80deg,
    rgba(255,255,255,0.03) 140deg,
    rgba(255,255,255,0.25) 206deg,
    rgba(255,255,255,0.05) 256deg,
    rgba(255,255,255,0.04) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transform: translateZ(2px);
  pointer-events: none;
}

/* base: a face de baixo, com a saída de som e a entrada do cabo */
.base {
  position: absolute;
  left: calc(var(--raio) - 10px); right: calc(var(--raio) - 10px);
  top: 100%;
  height: 36px;
  margin-top: 1px;       /* um fio pra fora das fatias, senão elas cobrem a base */
  transform-origin: top center;
  transform: rotateX(-90deg);
  border-radius: 6px;
  /* mesma lateral chapada: escura, acendendo perto da curva da direita, com o filete de luz na frente */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0, rgba(255,255,255,0.22) 2px, transparent 3px),
    linear-gradient(90deg, #26262a 0%, #2a2a2e 55%, #38383e 80%, #55555c 94%, #6e6e76 100%);
  display: flex; align-items: center; justify-content: center; gap: 18px;
}
.base__furos { display: flex; gap: 6px; }
.base__furos i { width: 7px; height: 7px; border-radius: 50%; background: #08080a; box-shadow: inset 0 2px 2px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.25); }
.base__cabo { width: 40px; height: 12px; border-radius: 6px; background: #08080a; box-shadow: inset 0 0 0 2px #1c1c20, 0 1px 0 rgba(255,255,255,0.25); }

/* sombra no chão, fora do 3D */
.sombra-chao {
  position: absolute;
  left: 18%; right: 6%; bottom: -6px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,63,127,0.35), rgba(0,0,0,0.5) 55%, transparent);
  filter: blur(10px);
  transform: rotate(-6deg);
}