/* ===========================================================================
   PRIMEIRA DOBRA (02/10)
   A dobra era só texto centralizado em fundo preto chapado e passava cara de
   página amadora. Agora: fundo com luz e grade discreta, texto à esquerda e
   três telas REAIS do app em leque à direita. No celular as telas vêm logo
   abaixo do botão. A copy não mudou.
=========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(60% 70% at 78% 45%, rgba(245, 199, 0, 0.16), transparent 70%),
    radial-gradient(50% 60% at 10% 0%, rgba(245, 199, 0, 0.07), transparent 70%),
    #000;
}
/* grade fina que some nas bordas */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 80%);
}

/* ---------- vitrine das telas ---------- */
.hero-vitrine {
  position: relative;
  height: 400px;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}
.hv-brilho {
  position: absolute; left: 50%; top: 50%;
  width: 70%; height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(245, 199, 0, 0.35), transparent 65%);
  filter: blur(30px);
}
.hero-vitrine .fone {
  position: absolute;
  left: 50%; top: 0;
  margin: 0;
  padding: 7px;
  border-radius: 34px;
}
.hero-vitrine .fone .tela { border-radius: 28px; }
.hero-vitrine .fone .ilha { width: 54px; height: 15px; top: 8px; }
.hero-vitrine .fone::after { display: none; }

.hv-centro {
  width: 190px;
  transform: translateX(-50%);
  z-index: 3;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(245, 199, 0, 0.35),
    0 0 60px rgba(245, 199, 0, 0.18) !important;
}
.hv-lado {
  width: 160px;
  top: 34px !important;
  z-index: 2;
  filter: brightness(0.72);
}
.hero-vitrine { perspective: 1400px; }
/* Os de trás saem quase inteiros de trás do central e giram em perspectiva:
   a tela deles aparece em vez de ficar escondida pelo aparelho do meio. */
.hv-esq { transform: translateX(-150%) rotateY(22deg) rotate(-3deg); transform-origin: right center; }
.hv-dir { transform: translateX(50%) rotateY(-22deg) rotate(3deg); transform-origin: left center; }

/* entrada suave, uma vez */
@media (prefers-reduced-motion: no-preference) {
  .hv-centro { animation: hv-sobe 0.9s cubic-bezier(.2, .8, .2, 1) both; }
  .hv-esq { animation: hv-esq 1s 0.12s cubic-bezier(.2, .8, .2, 1) both; }
  .hv-dir { animation: hv-dir 1s 0.12s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes hv-sobe { from { opacity: 0; transform: translate(-50%, 40px); } }
@keyframes hv-esq { from { opacity: 0; transform: translateX(-50%) rotateY(0) rotate(0); } }
@keyframes hv-dir { from { opacity: 0; transform: translateX(-50%) rotateY(0) rotate(0); } }

/* celular: telas cortadas embaixo pela dobra, o que convida a rolar */
@media (max-width: 719px) {
  .hero { padding-bottom: 0; }
  .hero-in { gap: 34px; }
  .hero-vitrine { height: 330px; overflow: hidden; width: auto; max-width: none; margin: 0 -20px; }
  .hv-centro { width: 160px; }
  .hv-lado { width: 116px; }
  .hero-vitrine::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 4;
    background: linear-gradient(transparent, #000);
  }
}

/* ---------- desktop: duas colunas ---------- */
@media (min-width: 980px) {
  .hero { padding: 72px 0 80px; }
  .hero-in {
    grid-template-columns: 1.08fr 1fr;
    gap: 40px;
  }
  .hero-txt { max-width: 560px; margin: 0; text-align: left; }
  .hero-txt .sub { max-width: 520px; margin-left: 0; margin-right: 0; }
  .hero-txt .cta-linha { justify-content: flex-start; }

  .hero-vitrine { height: 540px; max-width: 600px; }
  .hv-centro { width: 248px; }
  .hv-lado { width: 196px; top: 50px !important; }
  .hero-vitrine .fone { padding: 9px; border-radius: 44px; }
  .hero-vitrine .fone .tela { border-radius: 36px; }
  .hero-vitrine .fone .ilha { width: 74px; height: 20px; top: 10px; }
}

/* ---------- celular: o leque cabe em qualquer largura (02/10) ----------
   No modo celular do navegador a página aparecia mais larga que a tela: o
   aparelho de trás da direita passava da borda em telas estreitas e o giro 3D
   (rotateY) escapa do recorte em alguns navegadores. No celular o leque usa
   giro simples e tamanho proporcional à largura da tela. */
@media (max-width: 719px) {
  .hero-vitrine {
    perspective: none;
    margin: 0;
    width: 100%;
    max-width: 420px;
    margin-left: auto; margin-right: auto;
    height: min(84vw, 330px);
  }
  .hv-centro { width: min(40vw, 160px); }
  .hv-lado { width: min(30vw, 120px); top: min(8vw, 34px) !important; }
  .hv-esq { transform: translateX(-138%) rotate(-7deg); }
  .hv-dir { transform: translateX(38%) rotate(7deg); }
  @keyframes hv-esq { from { opacity: 0; transform: translateX(-50%) rotate(0); } }
  @keyframes hv-dir { from { opacity: 0; transform: translateX(-50%) rotate(0); } }
}

/* celular: aparelho inteiro, sem cortar a base (02/10). A altura acompanha
   a largura do aparelho do meio (proporção da tela 9 x 19,5 mais a moldura). */
@media (max-width: 719px) {
  .hero { padding-bottom: 40px; }
  .hero-vitrine { height: calc(min(40vw, 160px) * 2.17 + 22px); }
  .hero-vitrine::after { display: none; }
}

/* desktop: título longo (teste de headline) encostava no aparelho da esquerda */
@media (min-width: 980px) {
  .hero-txt { position: relative; z-index: 2; }
  .hero-vitrine { left: 40px; }
}