/* Carrossel de celulares no hero (modelo Phone Mockups 1, solaceui/21st.dev) com telas reais da /calculadora.
   PC: aparelho inteiro, botões embaixo dele. Celular: corte embaixo esmaecendo no fundo, botões por cima.
   --desloc é o quanto os celulares do lado se afastam do meio, em larguras de aparelho. */
.celulares {
  --larg: clamp(220px, 21vw, 290px);
  --desloc: 0.5;
  position: relative;
  /* Aparelho inteiro (9:19,5), o respiro de cima e a fileira de botões. */
  height: calc(var(--larg) * 2.1667 + 96px);
  overflow: hidden;
  touch-action: pan-y;
}

.celulares-trilho {
  position: absolute;
  inset: 0;
}

@media (max-width: 900px) {
  .celulares {
    --larg: clamp(200px, 62vw, 270px);
    --desloc: 0.66;
    /* Sangra até as bordas da tela: os celulares do lado somem no limite do aparelho, não no do container. */
    margin: -24px -20px 0;
    height: calc(var(--larg) * 1.62);
  }

  /* Fundo do hero no celular: céu com nuvens embaixo, que aparecem por trás do esmaecimento dos aparelhos.
     Os degradês emendam o topo e a base da foto no bege da página. */
  .abertura {
    background:
      linear-gradient(to bottom, var(--bg), rgba(246, 243, 238, 0) 90px),
      linear-gradient(to top, var(--bg), rgba(246, 243, 238, 0) 120px),
      url("fotos/ceu-hero-celular.webp") center bottom / cover no-repeat;
  }

  /* O corte de baixo esmaece no fundo da página. A máscara fica só no trilho:
     os botões, fora dele, continuam opacos por cima da parte apagada. */
  .celulares-trilho {
    -webkit-mask-image: linear-gradient(to bottom, #000 42%, rgba(0, 0, 0, 0.55) 70%, transparent 96%);
    mask-image: linear-gradient(to bottom, #000 42%, rgba(0, 0, 0, 0.55) 70%, transparent 96%);
  }
}

/* Fundo do hero no PC: versão deitada do mesmo céu, calma à esquerda (texto) e com as nuvens à direita, atrás
   dos aparelhos. As bordas da foto vêm num creme um pouco mais quente: os degradês emendam no bege da página. */
@media (min-width: 901px) {
  .abertura {
    background:
      linear-gradient(to bottom, var(--bg), rgba(246, 243, 238, 0) 90px),
      linear-gradient(to top, var(--bg), rgba(246, 243, 238, 0) 120px),
      url("fotos/ceu-hero-pc.webp") center / cover no-repeat;
  }
}

.celular {
  --pos-x: 0px;
  --pos-y: 0px;
  --escala: 1;
  position: absolute;
  top: 14px;
  left: 50%;
  width: var(--larg);
  aspect-ratio: 9 / 19.5;
  margin: 0;
  padding: calc(var(--larg) * 0.04);
  border-radius: calc(var(--larg) * 0.17);
  background: #1d1919;
  box-shadow:
    inset 0 0 0 1.5px #4a4343,
    0 0 0 1px #0e0b0b,
    0 30px 60px -30px rgba(40, 5, 8, 0.5);
  opacity: 0;
  transform: translateX(-50%) translate(var(--pos-x), var(--pos-y)) scale(var(--escala));
  transform-origin: top center;
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease;
  cursor: pointer;
}

/* Botões laterais: dois de volume na esquerda, o de ligar na direita. */
.celular::before,
.celular::after {
  content: "";
  position: absolute;
  width: 3px;
  background: #2a2525;
}

.celular::before {
  left: -3px;
  top: 21%;
  height: 8%;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 calc(var(--larg) * 0.2) 0 #2a2525;
}

.celular::after {
  right: -3px;
  top: 27%;
  height: 13%;
  border-radius: 0 2px 2px 0;
}

.celular[data-pos="centro"] {
  opacity: 1;
  z-index: 3;
  cursor: default;
}

.celular[data-pos="esquerda"],
.celular[data-pos="direita"] {
  --pos-y: calc(var(--larg) * 0.16);
  --escala: 0.84;
  opacity: 0.45;
  z-index: 2;
}

.celular[data-pos="esquerda"] {
  --pos-x: calc(var(--larg) * var(--desloc) * -1);
}

.celular[data-pos="direita"] {
  --pos-x: calc(var(--larg) * var(--desloc));
}

.celular[data-pos="fora-esq"],
.celular[data-pos="fora-dir"] {
  --pos-y: calc(var(--larg) * 0.28);
  --escala: 0.7;
  z-index: 1;
  pointer-events: none;
}

.celular[data-pos="fora-esq"] {
  --pos-x: calc(var(--larg) * -1.2);
}

.celular[data-pos="fora-dir"] {
  --pos-x: calc(var(--larg) * 1.2);
}

.celular-tela {
  position: relative;
  height: 100%;
  border-radius: calc(var(--larg) * 0.13);
  overflow: hidden;
  background: var(--branco);
}

.celular-tela img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* Barra de status desenhada: o print do app começa no cabeçalho dele, sem relógio nem bateria. */
.celular-status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--larg) * 0.13);
  padding: 0 calc(var(--larg) * 0.085) 0 calc(var(--larg) * 0.1);
  color: var(--texto);
  font: 600 calc(var(--larg) * 0.052) / 1 var(--fonte-num);
}

.celular-status::after {
  content: "";
  position: absolute;
  top: calc(var(--larg) * 0.028);
  left: 50%;
  width: 31%;
  height: calc(var(--larg) * 0.08);
  border-radius: 999px;
  background: #111;
  transform: translateX(-50%);
}

.celular-icones {
  display: flex;
  align-items: center;
  gap: calc(var(--larg) * 0.014);
}

.celular-icones svg {
  width: calc(var(--larg) * 0.058);
  height: calc(var(--larg) * 0.058);
}

.celular-icones .bateria {
  width: calc(var(--larg) * 0.08);
}

/* Anterior e próxima: círculos vinho, como os botões principais. No PC abaixo do aparelho, no celular por cima do corte. */
.celulares-controles {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 12px;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

@media (max-width: 900px) {
  .celulares-controles {
    bottom: 18px;
  }
}

.celulares-controles button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--acento);
  color: var(--branco);
  box-shadow: 0 10px 24px -10px rgba(60, 20, 20, 0.55);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.celulares-controles button:hover {
  background: var(--acento-hover);
  transform: translateY(-1px);
}

.celulares-controles button:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.celulares-controles .icone {
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .celular {
    transition: none;
  }
}