.cena-celular{--ease-suave:cubic-bezier(.22,1,.36,1);--color-marca-950:#0b1b33;--color-marca-400:#5798ff;--color-marca-500:#367df0;--color-marca-600:#1e6be0;--color-tinta-200:#dce4ef;--color-tinta-300:#b9c6d9;color:white}.cena-celular {
  --giro-x: 3deg;
  --giro-y: -15deg;
  --brilho-x: 28%;
  --brilho-y: 18%;
  --brilho-forca: 0.55;

  perspective: 1400px;
  perspective-origin: 50% 40%;
  display: flex;
  justify-content: center;
  padding-block: 1rem 1.75rem;
}

.celular {
  position: relative;
  width: min(18.5rem, 62vw);
  aspect-ratio: 9 / 19.3;
  transform-style: preserve-3d;
  transform: rotateX(var(--giro-x)) rotateY(var(--giro-y));
  transition:
    transform 420ms var(--ease-suave),
    filter 420ms var(--ease-suave);
}

/* A sombra fica no chão, não no aparelho: sem `preserve-3d` ela seria
   apenas um borrão colado atrás e o celular pareceria adesivo. */
.celular__sombra {
  position: absolute;
  inset: auto 8% -4%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgb(0 0 0 / 0.55), transparent 72%);
  filter: blur(14px);
  transform: translateZ(-70px) rotateX(78deg);
}

/* Moldura. O degradê alterna claro e escuro nas quatro bordas para imitar a
   luz correndo pelo chanfro de metal — é o detalhe que separa "retângulo com
   borda" de "aparelho". */
.celular__corpo {
  position: absolute;
  inset: 0;
  border-radius: 2.5rem;
  padding: 0.28rem;
  transform-style: preserve-3d;
  background:
    linear-gradient(
      145deg,
      #9aa6b4 0%,
      #3b434e 14%,
      #262c34 34%,
      #7d8896 52%,
      #262c34 70%,
      #3b434e 88%,
      #98a4b2 100%
    );
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.08),
    0 26px 50px -18px rgb(4 10 20 / 0.75),
    0 8px 18px -10px rgb(4 10 20 / 0.6),
    inset 0 1px 1px rgb(255 255 255 / 0.22);
}

/* Botões laterais. `translateZ` negativo joga cada um para trás do plano da
   tela, então eles somem sozinhos quando o aparelho gira para o outro lado —
   como aconteceria com o botão real. */
.celular__botao {
  position: absolute;
  border-radius: 2px;
  background: linear-gradient(180deg, #7c8593, #333a44 40%, #1e232a);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25);
  transform: translateZ(-6px);
}

.celular__botao--silencioso {
  left: -2px;
  top: 15%;
  width: 3px;
  height: 4.5%;
}

.celular__botao--volume-cima {
  left: -2px;
  top: 23%;
  width: 3px;
  height: 8%;
}

.celular__botao--volume-baixo {
  left: -2px;
  top: 33%;
  width: 3px;
  height: 8%;
}

.celular__botao--travar {
  right: -2px;
  top: 26%;
  width: 3px;
  height: 11%;
}

.celular__tela {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 2.25rem;
  background: linear-gradient(168deg, #12203a 0%, var(--color-marca-950) 45%, #060d1a 100%);
  transform-style: preserve-3d;
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 0.85),
    inset 0 0 22px rgb(0 0 0 / 0.55);
}

.celular__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.05rem 0.2rem;
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--color-tinta-200);
  transform: translateZ(1px);
}

.celular__status-icones {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.celular__sinal {
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
  height: 7px;
}

.celular__sinal i {
  width: 2px;
  border-radius: 1px;
  background: var(--color-tinta-200);
}

.celular__sinal i:nth-child(1) {
  height: 3px;
}
.celular__sinal i:nth-child(2) {
  height: 4.5px;
}
.celular__sinal i:nth-child(3) {
  height: 6px;
}
.celular__sinal i:nth-child(4) {
  height: 7px;
}

.celular__bateria {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 7px;
  border: 1px solid var(--color-tinta-300);
  border-radius: 2px;
}

.celular__bateria::before {
  content: '';
  position: absolute;
  inset: 1px;
  width: 72%;
  border-radius: 1px;
  background: var(--color-marca-400);
}

.celular__bateria::after {
  content: '';
  position: absolute;
  top: 2px;
  right: -3px;
  width: 2px;
  height: 3px;
  border-radius: 0 1px 1px 0;
  background: var(--color-tinta-300);
}

.celular__conteudo {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.85rem 1.05rem 1.6rem;
  transform: translateZ(2px);
}

/* `margin-top: auto` empurra as ações para o pé da tela. Sem isso o aparelho
   fica com a metade de baixo preta e vazia, e o que devia parecer um app
   parece um card cortado. */
.celular__acoes {
  margin-top: auto;
  padding-top: 0.9rem;
  display: grid;
  gap: 0.35rem;
}

.celular__acao {
  border-radius: 0.5rem;
  padding: 0.4rem 0.5rem;
  text-align: center;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-tinta-200);
  border: 1px solid rgb(255 255 255 / 0.14);
}

.celular__acao--principal {
  border-color: transparent;
  background: linear-gradient(180deg, var(--color-marca-500), var(--color-marca-600));
  color: #fff;
  box-shadow: 0 4px 10px -4px rgb(47 116 245 / 0.7);
}

/* Barra de início do iOS. Detalhe pequeno, mas é o que fecha a leitura de
   "isto é a tela de um celular" em vez de "isto é um retângulo escuro". */
.celular__barra-inicio {
  position: absolute;
  bottom: 0.42rem;
  left: 50%;
  width: 32%;
  height: 3px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.35);
  transform: translateX(-50%) translateZ(3px);
}

.celular__cartao {
  margin-top: 0.85rem;
  border-radius: 0.6rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(255 255 255 / 0.05);
  padding: 0.5rem 0.6rem;
}

/* Ilha dinâmica: flutua acima da tela, então ganha sombra própria e se
   desloca em relação ao conteúdo quando o aparelho inclina. */
.celular__ilha {
  position: absolute;
  top: 0.62rem;
  left: 50%;
  width: 30%;
  height: 1.15rem;
  border-radius: 999px;
  background: #05070b;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
  transform: translateX(-50%) translateZ(5px);
}

/* Reflexo especular. Segue o ponteiro pelas variáveis `--brilho-*` e vive no
   plano mais alto, acima do vidro. */
.celular__reflexo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--brilho-forca);
  transform: translateZ(9px);
  background:
    radial-gradient(
      120% 80% at var(--brilho-x) var(--brilho-y),
      rgb(255 255 255 / 0.2) 0%,
      rgb(255 255 255 / 0.06) 26%,
      transparent 55%
    ),
    linear-gradient(122deg, rgb(255 255 255 / 0.14) 0%, transparent 38%);
  transition: opacity 420ms var(--ease-suave);
}

/* Em telas estreitas o aparelho encolhe e vira de frente: inclinação forte em
   pouca largura corta a leitura do que está escrito na tela. */
@media (max-width: 640px) {
  .cena-celular {
    --giro-x: 2deg;
    --giro-y: -9deg;
    padding-block: 0.5rem 2rem;
  }

  .celular {
    width: min(14.5rem, 58vw);
  }
}

/* --------------------------------------------------------------------------
   Movimento reduzido — respeitado globalmente, sem exceção.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.mini{font-size:9px;letter-spacing:.1em;color:#93b8ed;margin:0}.numero{display:flex;justify-content:space-between;align-items:center;margin-top:5px;font-size:15px}.numero small{font-size:8px;border:1px solid #ffffff40;padding:3px 5px;border-radius:10px}.etapas{list-style:none;padding:0;margin:18px 0 0;font-size:11px}.etapas li{display:flex;align-items:center;gap:9px;min-height:39px;color:#8f9fb9}.etapas li::before{content:'';width:14px;height:14px;border-radius:50%;border:1px solid #ffffff40;flex-shrink:0}.etapas li.feito,.etapas li.atual{color:white}.etapas li.feito::before{content:'✓';text-align:center;background:#367df0;border:0;font-size:9px}.etapas li.atual::before{background:#f39c42;border:0;box-shadow:0 0 0 3px #f39c4240}.previsao{font-size:11px;line-height:1.4;margin:5px 0 0}.hero-atendimento .cena-celular .celular{width:210px}.hero-atendimento .cena-celular{padding:0 0 1rem}.hero-atendimento .celular__conteudo p{color:inherit}.hero-atendimento .celular__conteudo .mini{color:#93b8ed}.hero-atendimento .celular__cartao{margin-top:.65rem}.hero-atendimento .etapas{margin-top:10px}.hero-atendimento .etapas li{min-height:29px}.hero-atendimento .celular__conteudo{padding:.7rem .9rem 1.4rem}.hero-atendimento .celular__acoes{padding-top:.65rem}.hero-atendimento .celular-legenda{text-align:center;font-size:.75rem;font-weight:400;color:#526b85;margin:.2rem 0 1.3rem}.celular__tela .numero small{font-size:7px}.celular__tela .numero strong{font-size:13px}/* Celular diretamente sobre a abertura, sem painel branco. */
.hero-equipamentos .hero-atendimento{background:transparent;box-shadow:none;border:0;padding:0}.hero-equipamentos .hero-atendimento>p,.hero-equipamentos .hero-atendimento .celular-legenda{color:#b9c9dc}.hero-equipamentos .hero-atendimento a{color:#f0f5fc;border-color:#ffffff24}.hero-equipamentos .hero-atendimento small{color:#b9c9dc}.hero-equipamentos .hero-atendimento .hero-nota{border-color:#ffffff24;color:#b9c9dc}.hero-equipamentos .hero-atendimento a b{color:#79cdf2}
.hero-equipamentos .hero-atendimento>a{margin-top:.7rem;padding:1rem 1.15rem;min-height:76px;border:1px solid #4d91c0;border-radius:12px;background:#153854;box-shadow:inset 0 1px 0 #ffffff0d}.hero-equipamentos .hero-atendimento>a>span{color:#8acbeb}.hero-equipamentos .hero-atendimento>a strong{color:#fff}.hero-equipamentos .hero-atendimento>a small{color:#c1d6e6}.hero-equipamentos .hero-atendimento>a:focus-visible{outline:3px solid #8bddff;outline-offset:3px}@media(hover:hover) and (pointer:fine){.hero-equipamentos .hero-atendimento>a:hover{background:#1a496c;border-color:#8bddff}}@media(prefers-reduced-motion:no-preference){.hero-equipamentos .hero-atendimento>a{transition:background .2s,border-color .2s,transform .2s}.hero-equipamentos .hero-atendimento>a:active{transform:scale(.98)}}
.hero.hero-equipamentos{background-image:url('../img/tecnologia-fundo-branco.svg')}
/* Contraste: fundo discreto, ações mais claras e texto branco. */
.hero-equipamentos .hero-atendimento>a{background:#075f91;border-color:#50b5df;box-shadow:0 5px 16px #0002}.hero-equipamentos .hero-atendimento>a strong{color:#fff}.hero-equipamentos .hero-atendimento>a small{color:#e4f4fc}.hero-equipamentos .hero-atendimento>a>span,.hero-equipamentos .hero-atendimento>a b{color:#d4f3ff}.hero-equipamentos .hero-atendimento>p{color:#e0eaf5}.hero-equipamentos .hero-atendimento .celular-legenda,.hero-equipamentos .hero-atendimento .hero-nota{color:#c3d2e4}.hero-apresentacao>p:not(.sobretitulo){color:#d3deeb}.hero-equipamentos .hero-apresentacao .botao.secundario{color:#eff8ff;border:1px solid #6ba0c2;background:#18324b}.hero.hero-equipamentos{background-image:url('../img/tecnologia-fundo-contraste.svg')}@media(hover:hover) and (pointer:fine){.hero-equipamentos .hero-atendimento>a:hover{background:#0874ad;border-color:#a6e4ff}.hero-atendimento a:hover strong{color:#fff}}
.hero-loja .hero-apresentacao .hero-loja-foto{width:100%;height:290px;object-fit:cover;border-radius:18px;display:block;margin-bottom:1.8rem;border:1px solid #ffffff18}.hero-loja .hero-apresentacao h1{font-size:clamp(2.5rem,4.5vw,4rem)}@media(max-width:760px){.hero-loja .hero-apresentacao .hero-loja-foto{height:210px;margin-bottom:1.4rem}}
.hero-loja-tour{display:grid;grid-template-columns:.8fr 1fr 1fr;gap:.65rem;margin:0 0 1.8rem}.hero-loja-tour figure{margin:0;min-width:0;position:relative;overflow:hidden;border-radius:14px;background:#14243a}.hero-loja-tour img{width:100%;height:280px;display:block;object-fit:cover}.hero-loja-tour figure:first-child img{object-position:50% 30%}.hero-loja-tour figcaption{position:absolute;bottom:0;left:0;right:0;padding:1.3rem .65rem .7rem;background:linear-gradient(transparent,#071222ed);font-size:.7rem;font-weight:600;color:white;line-height:1.4}.hero-loja-tour figure{transition:transform .25s ease}.hero-loja-tour figure:hover{transform:translateY(-3px)}@media(max-width:760px){.hero-loja-tour{gap:.4rem;margin-bottom:1.4rem}.hero-loja-tour img{height:210px}.hero-loja-tour figcaption{font-size:.62rem;padding:1rem .4rem .5rem}}@media(prefers-reduced-motion:reduce){.hero-loja-tour figure{transition:none}.hero-loja-tour figure:hover{transform:none}}

.hero-loja-tour img{height:315px}@media(max-width:760px){.hero-loja-tour img{height:235px}}