/* Propriedades numéricas permitem animar os três passos sem JavaScript. */
@property --foto-um {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --foto-dois {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --foto-tres {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.foto,
.foto *,
.foto *::before,
.foto *::after {
  box-sizing: border-box;
}

.foto {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: 48px 16px;
  scroll-margin-top: 112px; /* Menu de 96px + respiro de 16px. */
  font-family: var(--fonte);
  letter-spacing: 0;
  color: var(--tinta);
}

.foto [hidden] {
  display: none !important;
}

.foto__cartao {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "selo"
    "cabecalho"
    "carrossel"
    "acoes";
  justify-items: center;
  gap: 24px;
  padding: 24px;
  overflow: clip;
  border-radius: var(--raio-cartao);
  /* Ângulo e parada extraídos do gradiente do frame 134:632. */
  background: linear-gradient(
    165.3348036201202deg,
    var(--azul) 47.59615659713745%,
    var(--tinta) 100%
  );
}

.foto__selo {
  grid-area: selo;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  margin: 0;
  padding: 8px;
  border: 2px solid transparent; /* Borda de 2px no Figma. */
  border-radius: var(--raio-cartao);
  background:
    linear-gradient(90deg, #f4f6fe, #ebf0ff) padding-box,
    linear-gradient(90deg, #c1cfff, #b0c1ff) border-box;
  color: var(--cinza-700);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}

.foto__selo img {
  display: block;
  flex: 0 0 24px;
}

.foto__cabecalho {
  grid-area: cabecalho;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
  text-align: center;
}

.foto__titulo {
  margin: 0;
  color: var(--branco);
  font-size: 32px;
  font-weight: 600;
  line-height: 36px;
}

.foto__descricao {
  margin: 0;
  color: var(--cinza-200);
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
}

.foto__carrossel {
  --foto-um: 1;
  --foto-dois: 0;
  --foto-tres: 0;

  grid-area: carrossel;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  min-width: 0;
  min-inline-size: 0;
  margin: 0;
  padding: 24px 16px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #f4f6fe, #ebf0ff);
  animation: foto-ciclo 13.5s ease-in-out infinite;
}

.foto__quadro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.foto__titulos {
  display: grid;
  margin: 0;
  color: var(--tinta);
  font-size: 24px;
  font-weight: 500;
  line-height: 20px; /* Figma: entrelinha menor que o corpo de 24px. */
  text-align: center;
}

.foto__titulo-passo {
  grid-area: 1 / 1;
  opacity: var(--foto-ativo);
}

.foto__estado--1 {
  --foto-ativo: var(--foto-um);
}

.foto__estado--2 {
  --foto-ativo: var(--foto-dois);
}

.foto__estado--3 {
  --foto-ativo: var(--foto-tres);
}

.foto__passos {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.foto__passo {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  min-width: 0;
  height: calc(72px + 256px * var(--foto-ativo));
  overflow: clip;
  border-radius: 16px;
  background: linear-gradient(180deg, #d1dbfe 61.192%, #c1cfff);
  cursor: pointer;
}

.foto__passo--3 {
  border-radius: calc(16px + 8px * var(--foto-ativo));
}

.foto__seletor {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.foto__numero {
  position: absolute;
  z-index: 2;
  top: calc(16px - 8px * var(--foto-ativo));
  left: calc(16px + (100% - 64px) * var(--foto-ativo));
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 12px;
  background: var(--papel);
  color: var(--texto-suave);
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
}

.foto__passo--3 .foto__numero {
  top: 16px;
  left: calc(16px + (100% - 72px) * var(--foto-ativo));
}

.foto__imagem-grande {
  position: absolute;
  inset: 0;
  overflow: clip;
  border-radius: inherit;
  opacity: var(--foto-ativo);
}

.foto__retrato {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.foto__personagem {
  /* Inversão exata da matriz CROP do Figma; não usar object-fit: cover. */
  position: absolute;
  top: 0;
  left: -18.42783515666538%;
  display: block;
  width: 136.85567031333076%;
  max-width: none;
  height: 148.11714779326655%;
}

.foto__miniatura {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: block;
  width: 40px;
  height: 40px;
  overflow: clip;
  border-radius: 8px;
  opacity: calc(1 - var(--foto-ativo));
}

.foto__miniatura img {
  position: absolute;
  display: block;
  max-width: none;
}

.foto__miniatura--foto img {
  /* Recorte da miniatura do passo 1 nas variantes 2 e 3. */
  top: -13.749998924322446%;
  left: 0.7812467913025009%;
  width: 98.43750586733258%;
  height: 131.2499975552783%;
}

.foto__miniatura--personagem img {
  /* Recorte da camada Miniatura; percentuais fora da grade vêm do Figma. */
  top: -7.49999912828212%;
  left: -23.12500016344711%;
  width: 146.2499959683047%;
  height: 194.99998895824018%;
}

.foto__miniatura--etiqueta img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foto__resultado {
  background: linear-gradient(180deg, #ebf0ff 61.192%, #b0c1ff);
}

.foto__mao {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transform-origin: top left;
}

/* Coordenadas e rotações das camadas 103:230–103:232.
   Larguras e posições horizontais escalam a partir da área de 278px. */
.foto__mao--dino {
  top: 226.68638610839844px;
  left: calc(100% * -12 / 278);
  width: calc(100% * 216 / 278);
  transform: rotate(-12.754280495592278deg);
}

.foto__mao--espaco {
  top: 23px;
  left: 0;
  width: calc(100% * 216 / 278);
}

.foto__mao--safari {
  top: 107.870849609375px;
  left: calc(100% * 73.697998046875 / 278);
  width: calc(100% * 204 / 278);
  transform: rotate(1.128620818603479deg);
}

.foto__indicador {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 8px;
  width: 100%;
}

.foto__pontos {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  gap: 8px;
}

.foto__ponto {
  position: relative;
  display: block;
  flex: none;
  width: calc(6px + 84px * var(--foto-ativo));
  height: 6px; /* Figma: pontos 6×6; indicador selecionado 90×6. */
  overflow: hidden;
  border-radius: 18px; /* Raio de 18px explicitamente definido no Figma. */
  background: color-mix(in srgb, var(--tinta) 60%, transparent);
}

.foto__ponto::after {
  position: absolute;
  inset: 0;
  background: var(--azul);
  opacity: var(--foto-ativo);
  content: "";
}

.foto__legenda {
  margin: 0;
  /* Ajuste de contraste documentado em foto-notas.md. */
  color: var(--texto-suave);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
}

.foto__anotacao {
  width: 100%;
  margin: 0;
  color: var(--texto-suave);
  font-family: var(--fonte-anotacao);
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
}

.foto__acoes {
  grid-area: acoes;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
  text-align: center;
}

.foto__preco {
  width: 100%;
  margin: 0;
  color: var(--cinza-50);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.foto__botao {
  width: 100%;
}

.foto__aviso {
  width: 100%;
  margin: 0;
  color: var(--cinza-200);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}

.foto__acessivel {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Controles adicionais de acessibilidade sobrepostos, sem deslocar o layout. */
.foto__controles {
  position: absolute;
  z-index: 5;
  top: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: calc(100% - 16px);
  padding: 8px;
  border-radius: 8px;
  background: var(--papel);
  color: var(--tinta);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  opacity: 0;
  pointer-events: none;
}

.foto__controle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.foto__controle input {
  margin: 0;
  accent-color: var(--azul);
}

.foto__carrossel:hover .foto__controles,
.foto__carrossel:focus-within .foto__controles,
.foto__carrossel:has(#foto-pausa:checked) .foto__controles {
  opacity: 1;
  pointer-events: auto;
}

.foto__carrossel:hover,
.foto__carrossel:focus-within,
.foto__carrossel:has(#foto-pausa:checked) {
  animation-play-state: paused;
}

.foto__passo:has(.foto__seletor:focus-visible) {
  outline: 4px solid var(--azul);
  outline-offset: 4px;
}

.foto__botao:focus-visible,
.foto__controle input:focus-visible {
  outline: 4px solid var(--ceu);
  outline-offset: 4px;
}

/* Seleção manual interrompe o ciclo; "Reprodução automática" o reinicia. */
.foto__carrossel:has(.foto__seletor:checked) {
  --foto-um: 0;
  --foto-dois: 0;
  --foto-tres: 0;
  animation: none;
  transition:
    --foto-um 500ms ease-in-out,
    --foto-dois 500ms ease-in-out,
    --foto-tres 500ms ease-in-out;
}

.foto__carrossel:has(#foto-passo-1:checked) {
  --foto-um: 1;
}

.foto__carrossel:has(#foto-passo-2:checked) {
  --foto-dois: 1;
}

.foto__carrossel:has(#foto-passo-3:checked) {
  --foto-tres: 1;
}

/* Figma: espera de 4s + SMART_ANIMATE de 500ms por estado.
   Cada terço do ciclo dura 4,5s; ciclo completo de 13,5s. */
@keyframes foto-ciclo {
  0%,
  29.6296296296% {
    --foto-um: 1;
    --foto-dois: 0;
    --foto-tres: 0;
  }

  33.3333333333%,
  62.962962963% {
    --foto-um: 0;
    --foto-dois: 1;
    --foto-tres: 0;
  }

  66.6666666667%,
  96.2962962963% {
    --foto-um: 0;
    --foto-dois: 0;
    --foto-tres: 1;
  }

  100% {
    --foto-um: 1;
    --foto-dois: 0;
    --foto-tres: 0;
  }
}

@media (min-width: 768px) {
  .foto {
    padding: 48px 32px;
  }

  .foto__cartao {
    gap: 32px;
    padding: 32px;
    background: linear-gradient(
      173.51771391599044deg,
      var(--azul) 47.59615659713745%,
      var(--tinta) 100%
    );
  }

  .foto__titulo {
    font-size: 48px;
    line-height: 48px;
  }

  .foto__carrossel {
    gap: 40px;
    padding: 32px 24px;
  }

  .foto__titulos,
  .foto__anotacao {
    text-align: left;
  }

  .foto__passos {
    flex-direction: row;
    gap: 24px;
  }

  .foto__passo {
    flex: var(--foto-ativo) 0 112px;
    width: auto;
    height: 400px;
    border-radius: calc(24px - 8px * var(--foto-ativo));
  }

  .foto__passo--3 {
    border-radius: var(--raio-cartao);
  }

  .foto__numero {
    left: calc(50% - 20px + (50% - 28px) * var(--foto-ativo));
  }

  .foto__passo--3 .foto__numero {
    left: calc(50% - 20px + (50% - 36px) * var(--foto-ativo));
  }

  .foto__miniatura {
    width: 80px;
    height: 80px;
    border-radius: 16px;
  }

  /* Camadas 134:238–134:240; área expandida de referência: 320×400. */
  .foto__mao--dino {
    top: 224px;
    left: calc(100% * -12 / 320);
    width: calc(100% * 264 / 320);
  }

  .foto__mao--espaco {
    top: 0;
    width: calc(100% * 264 / 320);
  }

  .foto__mao--safari {
    top: 116px;
    left: calc(100% * 60 / 320);
    width: calc(100% * 252 / 320);
    transform: rotate(8.83972875615775deg);
  }
}

@media (min-width: 1280px) {
  .foto {
    padding: 0 48px;
  }

  .foto__cartao {
    grid-template-columns: 504px minmax(0, 1fr);
    grid-template-rows: minmax(44px, 1fr) auto auto;
    grid-template-areas:
      "selo carrossel"
      "cabecalho carrossel"
      "acoes carrossel";
    align-items: start;
    justify-items: start;
    column-gap: 64px;
    row-gap: 24px;
    padding: 40px;
    background: linear-gradient(
      119.6805669716799deg,
      var(--azul) 47.59615659713745%,
      var(--tinta) 100%
    );
  }

  .foto__cabecalho {
    gap: 24px;
    text-align: left;
  }

  .foto__acoes {
    align-items: flex-start;
    text-align: left;
  }

  .foto__botao {
    width: 288px;
    max-width: 100%;
  }

  .foto__passo {
    height: 478px; /* Altura FIXED de 478px no Figma, fora da grade. */
  }

  /* Camadas 102:98–102:100; área expandida de referência: 376×478. */
  .foto__mao--dino {
    top: 328.7854309082031px;
    left: calc(100% * -20.029735565185547 / 376);
    width: calc(100% * 327 / 376);
  }

  .foto__mao--espaco {
    top: 2px;
    width: calc(100% * 327 / 376);
  }

  .foto__mao--safari {
    top: 130.1806640625px;
    left: calc(100% * 85.01394653320312 / 376);
    width: calc(100% * 315.9453125 / 376);
    transform: rotate(8.839728437326286deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .foto__carrossel,
  .foto__carrossel:has(.foto__seletor:checked) {
    animation: none;
    transition: none;
  }

  .foto__controle--pausa {
    display: none;
  }
}