/* ==========================================================================
   CELULAR — moldura oficial da extensão Mobile Simulator (23/09/2026)

   Regra da casa: moldura de aparelho vem da extensão, nunca de cabeça.
   Aparelho: apple-iphone-16-plus-2024 (ultramarino — conversa com o azul do
   iHub). device.png 962×1954 (2x) ⇒ quadro 481×977; tela 430×932 em (25,22),
   medido no viewport do simulator.js:
     left 5.1975% · top 2.2518% · width 89.397% · height 95.394%
   Ilha dinâmica (recortes do path da tela): x 147.38→282.29, y 13.13→51.08
     ⇒ no quadro: left 35.839% · top 3.5953% · width 28.047% · height 3.8854%
   O PNG é OPACO na área da tela: a tela (DOM vivo) vai POR CIMA dele e a ilha
   é redesenhada por cima da tela. Dentro da tela, tudo em cqw/cqh.

   Uso:
   <figure class="cel" style="--cel-w: 16rem">
     <img class="cel__moldura" src="images/aparelhos/iphone-16-plus.png" alt="" width="481" height="977">
     <div class="cel__tela"> … interface … </div>
     <span class="cel__ilha" aria-hidden="true"></span>
   </figure>
   ========================================================================== */
.cel {
  --cel-w: 16rem;
  position: relative;
  flex: none;
  inline-size: var(--cel-w);
  aspect-ratio: 481 / 977;
  margin: 0;
  isolation: isolate;
}
.cel > .cel__moldura {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.cel > .cel__tela {
  position: absolute;
  inset-inline-start: 5.1975%;
  inset-block-start: 2.2518%;
  inline-size: 89.397%;
  block-size: 95.394%;
  border-radius: 15.9% / 7.35%;
  overflow: clip;
  container-type: size;
  z-index: 1;
  background: #000;
  color: #fff;
  font-family: var(--tt-fonte, 'TikTok Sans', system-ui, sans-serif);
  /* ATENÇÃO: cqw/cqh escritos NA PRÓPRIA tela resolvem contra o contêiner de
     FORA (medido: padding 13cqw virou 187px). Tamanho de letra, padding e gap
     em cq só nos filhos. */
  font-size: 12px;
  line-height: 1.3;
  text-align: start;
  -webkit-font-smoothing: antialiased;
}
.cel > .cel__ilha {
  position: absolute;
  inset-inline-start: 35.839%;
  inset-block-start: 3.5953%;
  inline-size: 28.047%;
  block-size: 3.8854%;
  border-radius: 999px;
  background: #000;
  z-index: 3;
  pointer-events: none;
}

/* ---- peças fixas de toda tela: barra de status e indicador de início ---- */
.cel .cel__status {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: 6.1cqh;
  padding-inline: 8.5cqw 6.5cqw;
  padding-block-start: 1.2cqh;
  font-family: -apple-system, 'SF Pro Text', 'TikTok Sans', system-ui, sans-serif;
  font-size: 4.1cqw;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cel-status-cor, #fff);
  pointer-events: none;
}
.cel .cel__status-icones {
  display: inline-flex;
  align-items: center;
  gap: 1.4cqw;
}
.cel .cel__status-icones i {
  display: block;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}
.cel .cel__sinal { inline-size: 4.6cqw; block-size: 3cqw; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Crect x='0' y='8' width='3' height='4' rx='1'/%3E%3Crect x='5' y='5.5' width='3' height='6.5' rx='1'/%3E%3Crect x='10' y='3' width='3' height='9' rx='1'/%3E%3Crect x='15' y='0' width='3' height='12' rx='1'/%3E%3C/svg%3E"); }
.cel .cel__wifi { inline-size: 4.2cqw; block-size: 3cqw; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M8 12 5.6 9.4a3.4 3.4 0 0 1 4.8 0z'/%3E%3Cpath d='M3.4 7.2a6.5 6.5 0 0 1 9.2 0l-1.4 1.5a4.5 4.5 0 0 0-6.4 0z'/%3E%3Cpath d='M1.1 4.9a9.7 9.7 0 0 1 13.8 0l-1.4 1.5a7.7 7.7 0 0 0-11 0z'/%3E%3C/svg%3E"); }
.cel .cel__bateria { inline-size: 6.6cqw; block-size: 3.1cqw; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Crect x='.5' y='.5' width='22' height='11' rx='3' fill='none' stroke='%23000' opacity='.45'/%3E%3Crect x='2' y='2' width='17' height='8' rx='1.6'/%3E%3Crect x='23.6' y='4' width='1.8' height='4' rx='.9' opacity='.45'/%3E%3C/svg%3E"); }
.cel .cel__home {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 0.9cqh;
  z-index: 4;
  inline-size: 34cqw;
  block-size: 0.55cqh;
  border-radius: 999px;
  background: var(--cel-home-cor, rgba(255, 255, 255, 0.9));
  transform: translateX(-50%);
  pointer-events: none;
}
/* rótulo de honestidade: toda tela com número é de exemplo */
.cel .cel__exemplo {
  position: absolute;
  z-index: 5;
  inset-block-start: 7cqh;
  inset-inline-end: 4cqw;
  padding: 0.6cqw 2.2cqw;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
  font-size: 2.9cqw;
  font-weight: 600;
  letter-spacing: 0.02em;
}