/* =========================================================
   MOBILE — PREVIEW (STEPPER + CELULAR)
   Baseado no seu mockup desktop
========================================================= */
@media (max-width: 900px){

  /* A área do preview ocupa a tela toda e empilha */
  .preview{
    width: 100%;
    gap: 16px;                 /* antes 56px */
    flex-direction: column;    /* stepper em cima, phone embaixo */
    align-items: center;
    justify-content: flex-start;
    padding: 10px 0 22px;
  }

  /* Stepper já está horizontal no mobile (do bloco anterior)
     Aqui só garante que ele não “brigue” com o preview */
  .stepper{
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Glow mais compacto pra não “estourar” a tela */
  .phone-glow{
    padding: 8px;              /* antes 12px */
    border-radius: 34px;       /* acompanha phone menor */
    box-shadow:
      0 0 28px rgba(0, 217, 255, 0.45),
      0 0 70px rgba(0, 217, 255, 0.22);
  }

  /* Phone menor no mobile (mantém proporção do desktop 320x640) */
.phone{
  /* A altura manda (telas pequenas = phone menor, mas SEM achatar) */
  height: min(640px, 72vh);

  /* Proporção real de smartphone moderno */
  aspect-ratio: 9 / 19.5;

  /* Largura vem da proporção */
  width: auto;

  /* Segurança: não deixa passar da tela lateral */
  max-width: 92vw;

  border-radius: 30px;
  padding: 14px;
}



  .phone-top{
    margin-bottom: 14px;
    font-size: 11px;
  }

.phone-content{
  padding-top: 28px; /* menos empurra o conteúdo pra baixo */
  min-height: 0;     /* evita o conteúdo forçar altura e “amassar” visualmente */
}

  .phone-content h2{
    font-size: 20px;           /* antes 22px */
  }

  .phone-content p{
    font-size: 13px;           /* antes 14px */
  }

  .phone-footer{
    font-size: 10px;
  }

  /* Barra de URL: mais estreita e segura em telas pequenas */
  .phone-address-bar{
    width: 92%;
    padding: 9px 10px;
    margin-bottom: 18px;
  }

  .phone-address-bar .url-text{
    max-width: 210px;          /* controla o ellipsis melhor */
    font-size: 11px;
  }
}