/* Fuuxis: preto nos fundos e roxo nos destaques e ações. */
:root {
  --roxo: #a875ed;
  --roxo-profundo: #58218b;
}
.botao--solido { color: #fff; }
.botao--solido::after { background: var(--roxo-profundo); }
.botao--solido::before { border-color: var(--roxo); }
.botao--solido:hover { color: var(--roxo); }
#abertura .entrar { color: #fff; }
#abertura .entrar-placa {
  background: #58218bee;
  border-color: var(--roxo);
}
#abertura .entrar:hover .entrar-placa { border-color: #d6b5ff; }
.sobre-video {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1.5rem;
  background: #000;
  border: 1px solid var(--linha);
  border-radius: .75rem;
}

/* Mantém a foto vertical inteira e centralizada na galeria. */
.caso-foto img.caso-imagem-prime {
  object-fit: contain;
  object-position: center;
}

/* Foto como a face de um bloco com laterais e profundidade reais em CSS. */
.caso-foto--prime-3d {
  aspect-ratio: 4 / 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding: 1.5rem 2rem 2rem;
  background: transparent;
  perspective: 1000px;
}
.caso-bloco-3d {
  position: relative;
  width: 86%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1122 / 1402;
  max-width: 100%;
  transform-style: preserve-3d;
  transform: rotateX(7deg) rotateY(-16deg);
  box-shadow: -12px 22px 26px #0009;
}
.caso-foto--prime-3d .caso-bloco-3d {
  transform: none;
}
.caso-bloco-3d::before,
.caso-bloco-3d::after {
  content: "";
  position: absolute;
  background: linear-gradient(135deg, #794099, #24102f);
  border: 1px solid #a875ed55;
}
.caso-bloco-3d::before {
  top: 0;
  left: 100%;
  width: 18px;
  height: 100%;
  transform-origin: left center;
  transform: rotateY(90deg);
}
.caso-bloco-3d::after {
  top: 100%;
  left: 0;
  width: 100%;
  height: 18px;
  background: linear-gradient(#321540, #120a19);
  transform-origin: center top;
  transform: rotateX(-90deg);
}
.caso-bloco-3d img.caso-imagem-prime {
  position: relative;
  width: 100%;
  height: auto;
  border: 1px solid #a875ed66;
  border-radius: 2px;
  object-fit: contain;
}
@media (max-width: 760px) {
  .caso-foto--prime-3d { padding: 1rem 1.5rem 1.5rem; }
}
/* A tela acompanha as coordenadas da foto em qualquer largura. */
.caso-foto--celular-video { display: grid; place-items: center; }
.celular-cena { position: relative; width: 100%; aspect-ratio: 1444 / 1089; }
.celular-cena > img { width: 100%; height: auto; }
.celular-tela {
  position: absolute;
  left: 39.2%;
  top: 19.65%;
  width: 21.75%;
  height: 62.25%;
  overflow: hidden;
  border-radius: 15% / 7%;
  background: #000;
  isolation: isolate;
  pointer-events: none;
}
.celular-tela video { display: block; width: 100%; height: 100%; object-fit: cover; }
.celular-camera {
  position: absolute;
  top: 1.4%;
  left: 33.5%;
  width: 33%;
  height: 4.6%;
  border-radius: 999px;
  background: #000;
}
.celular-barra {
  position: absolute;
  bottom: .9%;
  left: 32%;
  width: 36%;
  height: .65%;
  border-radius: 999px;
  background: #000;
}
/* Bloco maior: a foto e o vídeo compartilham a mesma perspectiva. */
.caso-foto--celular-3d {
  width: min(92vw, 44rem);
  aspect-ratio: 4 / 3;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  padding: 2rem 2.5rem 3rem;
  perspective: 1200px;
  background: transparent;
}
.caso-bloco-3d--celular {
  width: 92%;
  height: auto;
  aspect-ratio: 1444 / 1089;
  border: 1px solid #a875ed66;
  border-radius: 2px;
}
@media (max-width: 760px) {
  .caso-foto--celular-3d { padding: 1.25rem 1.5rem 2rem; }
}
/* Aparelho isolado: sem placa atrás, com sombra apenas no chão. */
.caso-foto--celular-isolado {
  width: min(92vw, 40rem);
  aspect-ratio: 4 / 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding: 0 1rem 1.5rem;
  background: transparent;
}
.celular-isolado {
  position: relative;
  width: 86%;
  min-height: 0;
  aspect-ratio: 1057 / 1488;
  isolation: isolate;
}
.celular-isolado::after {
  content: "";
  position: absolute;
  left: 24%;
  top: 90%;
  width: 52%;
  height: 4%;
  background: radial-gradient(ellipse, #ffffffb3 0%, #ffffff66 35%, #ffffff00 72%);
  filter: blur(5px);
  z-index: -1;
}
.celular-isolado-tela {
  position: absolute;
  left: 26%;
  top: 14.2%;
  width: 45%;
  height: 72.3%;
  border-radius: 13% / 6%;
  overflow: hidden;
  transform-origin: top left;
  background: #000;
}
.celular-isolado-tela video { width: 100%; height: 100%; object-fit: contain; display: block; }
.celular-isolado img.celular-isolado-moldura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
/* Título sem tags e acesso ao site abaixo da galeria. */
.caso-topo { grid-template-columns: auto minmax(0, 1fr) auto; }
.caso-site { padding-bottom: clamp(1.8rem, 3.4vw, 2.8rem); }
.caso-site-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 100%;
  padding: 1rem 1.35rem;
  border: 1px solid #a875ed66;
  border-radius: .8rem;
  background: linear-gradient(135deg, #58218b26, #a875ed0a);
  transition: border-color .2s, background .2s;
}
.caso-site-info { display: grid; gap: .3rem; min-width: 0; }
.caso-site-info .rotulo { color: var(--roxo); font-size: .62rem; }
.caso-site-endereco { color: var(--branco); font-size: clamp(.85rem, 2.8vw, 1.05rem); overflow-wrap: anywhere; }
.caso-site-seta { color: var(--roxo); font-size: 1.65rem; line-height: 1; }
.caso-site-link:hover { border-color: var(--roxo); background: #58218b40; }
@media (max-width: 760px) {
  .caso-site-link { width: 100%; gap: 1rem; }
}
/* Capturas completas do projeto internacional, sem recorte. */
.caso-galeria--edgar { align-items: flex-start; }
.caso-foto--edgar-desktop { width: min(88vw, 44rem); aspect-ratio: 1167 / 921; }
.caso-foto--edgar-mobile { width: min(65vw, 20rem); aspect-ratio: 835 / 1600; }
.caso-foto--edgar-desktop img,
.caso-foto--edgar-mobile img { object-fit: contain; }

/* Entrada progressiva dos serviços ao rolar até os cartões. */
.servicos-animados .servico {
  opacity: 0;
  transform: translateY(28px) scale(.98);
  transition: opacity .65s var(--curva) var(--entrada-servico, 0ms),
    transform .65s var(--curva) var(--entrada-servico, 0ms),
    background-color .5s var(--curva);
}
.servicos-animados .servico--visivel {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .servicos-animados .servico { opacity: 1; transform: none; transition: none; }
}
/* Cartão transparente no canto direito da área de contato. */
.rodape-grade {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 360px);
  align-items: start;
}
.contato-vidro {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 360px;
  margin: 0;
  padding-bottom: 2rem;
  isolation: isolate;
}
.contato-vidro img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 18px #a875ed38);
}
.contato-vidro::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 8%;
  width: 84%;
  height: 2.2rem;
  border-radius: 50%;
  background: radial-gradient(ellipse, #e8d5ff99, #a875ed55 38%, #a875ed00 72%);
  filter: blur(10px);
  z-index: -1;
}
@media (max-width: 860px) {
  .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contato-vidro { grid-column: 1 / -1; width: min(78vw, 340px); }
}
@media (max-width: 420px) {
  .rodape-grade { grid-template-columns: minmax(0, 1fr); }
}
/* Link do Instagram no interior da moldura neon enviada. */
.contato-instagram-centro { grid-column: 1 / -1; display: flex; justify-content: center; width: 100%; }
.contato-instagram { position: relative; display: block; width: min(100%, 32rem); border-radius: 1rem; overflow: hidden; }
.contato-instagram img { width: 100%; height: auto; filter: none; }
.contato-instagram > span {
  position: absolute;
  left: 27%;
  top: 40%;
  width: 60%;
  height: 23%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  color: #fff;
  font-size: clamp(1.4rem, 6vw, 2.25rem);
  font-weight: 700;
  text-shadow: 0 0 12px #36aaff;
  transition: text-shadow .2s;
}
.contato-instagram:hover > span { text-shadow: 0 0 18px #36aaff, 0 0 30px #176dff; }
/* Navegação acessível por toque nas telas menores. */
@media (max-width: 900px) {
  :root { --topo: 116px; }
  .cabeca { flex-wrap: wrap; align-content: center; row-gap: 0; }
  .cabeca .menu {
    display: flex;
    order: 3;
    flex-basis: 100%;
    justify-content: space-between;
    gap: .5rem;
  }
  .cabeca .menu a { min-height: 44px; align-items: center; font-size: .78rem; }
  .cabeca .menu a::after { bottom: 3px; }
}
@media (max-width: 360px) {
  .inicio-lista li { font-size: 2rem; padding-left: 1.4em; }
}

/* Valores do hero: título discreto e palavras com presença editorial. */
.js .rosto--voando {
  transform-origin: top left;
  will-change: transform;
  pointer-events: none;
}
.rosto--voando img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  object-fit: fill;
  transform-origin: top left;
  will-change: transform;
}
.inicio-ponte {
  margin-bottom: 1.1rem;
  color: #c8b8da;
  font-size: clamp(.7rem, 1vw, .85rem);
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1.5;
  text-transform: uppercase;
}
.inicio-lista { gap: .55rem; }
.inicio-lista li {
  width: fit-content;
  max-width: 100%;
  padding: .08em 0 .08em .85em;
  font-size: clamp(1.8rem, 4.2vw, 3.6rem);
  font-variation-settings: "wdth" 85, "wght" 780;
  font-weight: 780;
  letter-spacing: -.035em;
  line-height: 1.08;
  text-transform: uppercase;
}
.inicio-lista li::before {
  top: .6em;
  width: .5em;
  height: 2px;
  background: linear-gradient(90deg, #a875ed, #e3c8ff);
}
.inicio-lista li span {
  color: #f3eafa;
  background: linear-gradient(110deg, #fff 5%, #dfc3ff 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.inicio-lista li:nth-child(2) span { background-image: linear-gradient(110deg, #e8d6ff, #bc8cf3); }
.inicio-lista li:nth-child(3) span { background-image: linear-gradient(110deg, #d4afff, #a875ed); }
@media (max-width: 900px) {
  .inicio-ponte { margin-bottom: .85rem; }
  .inicio-lista { gap: .5rem; }
  .inicio-lista li { font-size: clamp(1.35rem, 6.1vw, 3rem); }
}