/* ==========================================================================
   MARCA — NOVARÉ JOIAS
   A partir do design "Bio - Novaré" (ORIGINAIS/): título + logo sobre o
   fundo rosa com bokeh e um painel branco com três seções. Cores, fontes,
   textos e molduras são os do design; a disposição foi organizada numa
   grade única (colunas espelhadas, texto alinhado à esquerda e centrado
   na vertical com a foto, espaçamentos regulares).

   ANIMAÇÕES (só CSS; o gatilho é o .is-visible que o js/main.js do núcleo
   põe nos [data-reveal] quando entram na tela):
     abertura   título sobe linha a linha, logo entra do desfoque com
                reflexo de luz e faíscas douradas, painel sobe
     fundo      bolhas de bokeh flutuando
     seções     títulos em máscara, textos com desfoque, lista item a item
                com o check "estalando", foto em cortina com zoom que
                assenta, moldura que se desenha
     rolagem    foto com parallax na moldura, painel passando por cima do
                título (só onde há animation-timeline; o resto ignora)
     botões     brilho que atravessa de tempos em tempos, halo no hover
     obrigada   a palavra se escreve
   Tudo desliga com prefers-reduced-motion.
   ========================================================================== */

body {
  --suave:   cubic-bezier(.22, 1, .36, 1);
  --cortina: cubic-bezier(.77, 0, .18, 1);
  --mola:    cubic-bezier(.34, 1.56, .64, 1);
}

/* ---- Fundo da página inteira (rosa com bokeh, renderizado do PDF) -------
   html/body com altura automática para o "cover" medir o documento todo. */
html, body { height: auto; }
body {
  background: var(--bg) url("../assets/fundo.webp") center top / cover no-repeat;
}

/* bolhas flutuando por cima do fundo, atrás de tudo */
.bokeh {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bokeh span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(255,255,255,.4) 40%, rgba(255,255,255,0) 70%);
  opacity: .5;
  animation: bokeh-flutua var(--t) ease-in-out var(--a) infinite alternate;
  will-change: translate;
}
.bokeh span:nth-child(1) { --x:  6%; --y: 10%; --s: 24vmin; --t: 18s; --a:  -3s; --dx:  40px; --dy:  30px; }
.bokeh span:nth-child(2) { --x: 80%; --y:  6%; --s: 13vmin; --t: 14s; --a:  -6s; --dx: -30px; --dy:  40px; }
.bokeh span:nth-child(3) { --x: 86%; --y: 44%; --s: 20vmin; --t: 22s; --a:  -2s; --dx: -50px; --dy: -24px; }
.bokeh span:nth-child(4) { --x:  3%; --y: 58%; --s: 11vmin; --t: 16s; --a:  -8s; --dx:  30px; --dy: -40px; }
.bokeh span:nth-child(5) { --x: 28%; --y: 28%; --s:  6vmin; --t: 12s; --a:  -4s; --dx:  24px; --dy:  30px; }
.bokeh span:nth-child(6) { --x: 64%; --y: 72%; --s: 16vmin; --t: 20s; --a: -10s; --dx: -40px; --dy: -30px; }
.bokeh span:nth-child(7) { --x: 48%; --y:  2%; --s:  8vmin; --t: 15s; --a:  -5s; --dx:  30px; --dy:  20px; }

@keyframes bokeh-flutua {
  from { translate: 0 0;               opacity: .35; }
  to   { translate: var(--dx) var(--dy); opacity: .9; }
}

/* ---- Hero: título em texto + logo embaixo, sem foto --------------------- */
.hero { padding: 96px 24px 64px; }
.hero__bg { display: none; }

.hero__title {
  --d: .15s;
  font-size: 2.375rem;
  line-height: 1;
  letter-spacing: -.02em;           /* aproxima a largura das linhas do design */
  text-transform: uppercase;
}

/* logo com reflexo de luz (máscara = o próprio logo) e faíscas */
.logo {
  position: relative;
  display: block;
  width: var(--hero-logo);
  max-width: 100%;
  margin: 10px auto 0;
  line-height: 0;
  opacity: 0;
}
.logo .hero__logo { width: 100%; max-width: none; margin: 0; }
.logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255,248,236,.95) 50%, transparent 58%) 100% 0 / 300% 100% no-repeat;
  -webkit-mask: url("../assets/logo.webp") center / 100% 100% no-repeat;
          mask: url("../assets/logo.webp") center / 100% 100% no-repeat;
}
.hero__inner.is-visible .logo { animation: logo-surge 1.6s var(--suave) .8s both; }
.hero__inner.is-visible .logo::after { animation: reflexo 6s ease-in-out 2.6s infinite; }

@keyframes logo-surge {
  from { opacity: 0; scale: .9; filter: blur(10px); }
  to   { opacity: 1; scale: 1;  filter: blur(0); }
}
@keyframes reflexo {
  0%        { background-position: 100% 0; }
  30%, 100% { background-position: 0 0; }
}

.faisca {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  background: linear-gradient(135deg, #f6e4b0, #c9a86a);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  scale: 0;
}
.faisca:nth-child(2) { --x: 14%; --y: -12%; --s: 13px; --f: 0s; }
.faisca:nth-child(3) { --x: 71%; --y: -16%; --s: 10px; --f: 1.1s; }
.faisca:nth-child(4) { --x: 98%; --y: 30%;  --s: 12px; --f: .5s; }
.faisca:nth-child(5) { --x: 1%;  --y: 58%;  --s: 9px;  --f: 1.7s; }
.hero__inner.is-visible .faisca {
  animation: faiscar 3.4s ease-in-out infinite;
  animation-delay: calc(2s + var(--f));
}
@keyframes faiscar {
  0%, 100% { scale: 0; rotate: 0deg;  opacity: 0; }
  18%      { scale: 1; rotate: 45deg; opacity: 1; }
  38%      { scale: 0; rotate: 90deg; opacity: 0; }
}

/* ---- Painel branco: sobe na abertura e passa por cima do título -------- */
.page {
  position: relative;
  z-index: 1;
  background: var(--superficie);
  padding: 72px 56px 64px;
  box-shadow: 0 40px 90px -40px rgba(var(--sombra-rgb), .35);
  animation: painel-sobe 1.3s var(--suave) .6s both;
}
@keyframes painel-sobe {
  from { opacity: 0; translate: 0 60px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ---- Títulos e textos das seções --------------------------------------- */
.bloco__titulo {
  font-family: var(--fonte-display);
  font-weight: var(--peso-titulo);
  font-size: 2.375rem;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--texto);
}
.bloco__sub,
.bloco__descricao {
  margin-top: 14px;
  font-size: .9375rem;
  line-height: 1.45;
  text-wrap: pretty;
}
.bloco__sub { font-weight: 700; }

/* lista com o check rosa do design, os checks alinhados em coluna */
.vantagens {
  list-style: none;
  margin-top: 14px;
  display: grid;
  row-gap: 7px;
  font-size: .9375rem;
  line-height: 1.3;
}
.vantagens li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vantagens li::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--acao) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.2' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* ---- Botão em pílula (texto em HTML) com brilho que atravessa ---------- */
.botao {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 26px;
  padding: 0 38px;
  border-radius: 999px;
  background: var(--acao);
  color: var(--contraste);
  font-weight: 500;
  font-size: .875rem;
  text-decoration: none;
  box-shadow: 0 10px 20px -10px rgba(var(--acao-rgb), .8);
  transition: transform .35s var(--suave), box-shadow .35s var(--suave), background-color .35s ease;
}
.botao::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                       /* entre o fundo do botão e o texto */
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  translate: -120% 0;
  animation: botao-brilho 5s ease-in-out var(--brilho, 3s) infinite;
}
.botao:hover {
  transform: translateY(-3px);
  background-color: #e3989d;
  box-shadow: 0 16px 30px -10px rgba(var(--acao-rgb), .95), 0 0 0 6px rgba(var(--acao-rgb), .16);
}
.botao:active { transform: translateY(-1px); }

@keyframes botao-brilho {
  0%        { translate: -120% 0; }
  22%, 100% { translate: 120% 0; }
}

/* ---- Fotos com moldura de fio rosa ------------------------------------- */
.foto { position: relative; line-height: 0; }
.foto::before {                      /* a moldura fica parada; a foto se move */
  content: "";
  position: absolute;
  border: 1.5px solid var(--acao);
}
.foto__janela {                      /* recorta o zoom da entrada */
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  transition: transform .6s var(--suave);
}
.foto img {
  display: block;
  width: 100%;
  height: auto;
}
.foto:hover .foto__janela { transform: translateY(-6px); }

/* seção 1 e fechamento: moldura passa da foto em cima e embaixo, e fica por dentro dos lados */
.foto--quadrada::before,
.foto--centro::before { inset: -8px 4px; }
/* seção 2: moldura deslocada para baixo e para a direita */
.foto--deslocada::before { inset: 13px -15px -15px 13px; }

/* ---- Seções: a mesma grade espelhada ----------------------------------- */
.bloco {
  display: grid;
  grid-template-columns: 1fr 280px;
  column-gap: 64px;
  align-items: center;
}
.bloco--maleta {
  grid-template-columns: 280px 1fr;
  margin-top: 80px;
}
.bloco__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.fechamento {
  margin-top: 88px;                  /* a moldura da seção 2 passa 15px da foto */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.fechamento .foto--centro {
  width: 300px;
  margin-top: 36px;
}
.fechamento .foto--centro + .bloco__descricao { margin-top: 30px; }

/* ---- Obrigada: palavra grande esmaecida com a mesma se escrevendo ------ */
.obrigada {
  position: relative;
  margin-top: 40px;
  text-align: center;
  font-family: "Allura", cursive;
  line-height: 1;
  color: var(--texto);
}
.obrigada__fundo {
  display: block;
  font-size: 5.5rem;
  color: rgba(98, 98, 98, .16);
}
.obrigada__frente {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.4rem;
}
.obrigada__frente > span { padding: 0 .3em; }

/* ---- Rodapé discreto (o design não tem) -------------------------------- */
.footer { padding: 40px 20px 22px; }
.footer small { color: var(--texto); font-weight: 400; }

/* ==========================================================================
   COREOGRAFIA DE ENTRADA
   --d = atraso de cada peça; --b = atraso-base da seção (a seção 1 espera
   o painel subir).
   ========================================================================== */

/* os contêineres ficam parados: quem anima são as peças de dentro */
.hero__inner.reveal,
.bloco__texto.reveal,
.foto.reveal,
.anima-linhas.reveal,
.obrigada.reveal { opacity: 1; transform: none; }
.anima-item.reveal { transform: none; }

.bloco--comecar { --b: .8s; }
.bloco--maleta,
.fechamento     { --b: 0s; }

.bloco__titulo                  { --d: calc(var(--b) + .0s); }
.bloco--maleta .bloco__titulo   { --d: .15s; }
.bloco__sub                     { --d: calc(var(--b) + .3s); }
.vantagens                      { --d: calc(var(--b) + .45s); }
.bloco--comecar .botao          { --d: calc(var(--b) + .95s); --brilho: 3.2s; }
.bloco--comecar .foto           { --d: calc(var(--b) + .25s); }
.bloco--maleta .foto            { --d: 0s; }
.bloco--maleta .bloco__descricao { --d: .45s; }
.bloco--maleta .botao           { --d: .65s; --brilho: 4.4s; }
.fechamento .botao              { --d: .1s;  --brilho: 5.6s; }

/* títulos: cada linha sobe por trás de uma máscara */
.anima-linhas .linha {
  display: block;
  overflow: hidden;
  padding: .06em 0 .22em;            /* folga para a cedilha e a cauda do Q */
  margin: -.06em 0 -.22em;
}
.anima-linhas .linha > span {
  display: block;
  translate: 0 115%;
}
.anima-linhas .linha:nth-child(2) > span { --n: 1; }
.anima-linhas .linha:nth-child(3) > span { --n: 2; }
.is-visible .linha > span {
  animation: linha-sobe 1.15s var(--suave) both;
  animation-delay: calc(var(--d, 0s) + var(--n, 0) * .12s);
}
@keyframes linha-sobe {
  from { translate: 0 115%; }
  to   { translate: 0 0; }
}

/* textos e botões: sobem saindo do desfoque */
.anima-item { opacity: 0; }
.is-visible .anima-item,
.anima-item.is-visible { animation: surgir 1s var(--suave) var(--d, 0s) both; }
@keyframes surgir {
  from { opacity: 0; translate: 0 18px; filter: blur(8px); }
  to   { opacity: 1; translate: 0 0;    filter: blur(0); }
}

/* lista: item a item, com o check girando e estalando */
.vantagens li:nth-child(1) { --i: 0; }
.vantagens li:nth-child(2) { --i: 1; }
.vantagens li:nth-child(3) { --i: 2; }
.vantagens li:nth-child(4) { --i: 3; }
.vantagens li:nth-child(5) { --i: 4; }
.vantagens li { opacity: 0; }
.vantagens li::before { scale: 0; }
.is-visible .vantagens li {
  animation: item-entra .8s var(--suave) both;
  animation-delay: calc(var(--d) + var(--i) * .09s);
}
.is-visible .vantagens li::before {
  animation: check-estala .6s var(--mola) both;
  animation-delay: calc(var(--d) + var(--i) * .09s + .15s);
}
@keyframes item-entra {
  from { opacity: 0; translate: -14px 0; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes check-estala {
  from { scale: 0; rotate: -120deg; }
  to   { scale: 1; rotate: 0deg; }
}

/* fotos: cortina de cima para baixo, zoom que assenta e moldura que se desenha */
.foto .foto__janela { clip-path: inset(0 0 100% 0); }
.foto img { scale: 1.2; }
.foto::before { clip-path: inset(0 50% 0 50%); }
.foto--deslocada::before { clip-path: inset(0 100% 100% 0); }

.foto.is-visible .foto__janela { animation: cortina 1.4s var(--cortina) var(--d, 0s) both; }
.foto.is-visible img           { animation: assentar 2.4s var(--suave) var(--d, 0s) both; }
.foto.is-visible::before       { animation: moldura 1.3s var(--suave) calc(var(--d, 0s) + .55s) both; }

@keyframes cortina  { to { clip-path: inset(0 0 0 0); } }
@keyframes assentar { from { scale: 1.2; } to { scale: 1; } }
@keyframes moldura  { to { clip-path: inset(0 0 0 0); } }

/* obrigada: a grande aparece, a pequena se escreve da esquerda para a direita */
.obrigada__fundo { opacity: 0; }
.obrigada__frente > span { clip-path: inset(-40% 100% -40% 0); }
.obrigada.is-visible .obrigada__fundo { animation: fundo-surge 2s var(--suave) both; }
.obrigada.is-visible .obrigada__frente > span {
  animation: escrever 2.2s cubic-bezier(.65, 0, .35, 1) .5s both;
}
@keyframes fundo-surge {
  from { opacity: 0; letter-spacing: .08em; filter: blur(6px); }
  to   { opacity: 1; letter-spacing: 0;     filter: blur(0); }
}
@keyframes escrever { to { clip-path: inset(-40% -10% -40% 0); } }

/* ---- Movimento ligado à rolagem (onde o navegador suporta) ------------- */
@supports (animation-timeline: view()) {
  /* a foto desliza dentro da moldura, mais devagar que a página */
  .foto .foto__janela {
    animation: deriva linear both;
    animation-timeline: view();
    animation-range: cover;
  }
  .foto.is-visible .foto__janela {
    animation: cortina 1.4s var(--cortina) var(--d, 0s) both, deriva linear both;
    animation-timeline: auto, view();
    animation-range: normal, cover;
  }
  @keyframes deriva {
    from { translate: 0 12px; }
    to   { translate: 0 -12px; }
  }

  /* o título se afasta e o painel passa por cima */
  .hero__inner {
    animation: hero-sai linear both;
    animation-timeline: scroll(root);
    animation-range: 0px 560px;
  }
  @keyframes hero-sai {
    to { opacity: .2; translate: 0 110px; scale: .94; }
  }
}

/* ==========================================================================
   VÍDEO DA MALETA: play sobre a foto da seção 2 + pop-up (js/video.js)
   ========================================================================== */
a.foto__janela { cursor: pointer; }

.foto__play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 68px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--acao);
  box-shadow: 0 10px 30px rgba(var(--sombra-rgb), .35);
  transition: scale .35s var(--mola), background-color .3s ease;
}
.foto__play svg { width: 26px; margin-left: 4px; }
.foto__play::before {                /* anel que pulsa chamando o clique */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .95);
  animation: play-pulsa 2.2s ease-out infinite;
}
@keyframes play-pulsa {
  from { scale: 1;   opacity: .9; }
  to   { scale: 1.7; opacity: 0; }
}
a.foto__janela:hover .foto__play,
a.foto__janela:focus-visible .foto__play { scale: 1.1; background: #fff; }

.video-modal {
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  max-width: none;
  max-height: none;
}
.video-modal::backdrop {
  background: rgba(60, 30, 34, .55);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.video-modal[open]            { animation: modal-entra .55s cubic-bezier(.22, 1, .36, 1) both; }
.video-modal[open]::backdrop  { animation: fundo-entra .4s ease both; }
.video-modal--saindo[open]           { animation: modal-sai .26s ease-in both; }
.video-modal--saindo[open]::backdrop { animation: fundo-entra .26s ease reverse both; }
@keyframes modal-entra { from { opacity: 0; scale: .9; translate: 0 24px; } }
@keyframes modal-sai   { to   { opacity: 0; scale: .95; translate: 0 12px; } }
@keyframes fundo-entra { from { opacity: 0; } }

.video-modal__caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.video-modal video {
  display: block;
  height: min(70dvh, 680px);
  width: auto;
  max-width: 92vw;
  aspect-ratio: 464 / 832;
  object-fit: cover;
  border-radius: 16px;
  background: #1a1214;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.video-modal__cta {
  margin-top: 18px;
  opacity: 1;
}
.video-modal__fechar {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--texto);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
  transition: rotate .35s var(--suave), scale .35s var(--suave);
}
.video-modal__fechar svg { width: 18px; }
.video-modal__fechar:hover { rotate: 90deg; scale: 1.08; }

/* ==========================================================================
   TELA DE MANUTENÇÃO (index.html da raiz, <body class="manutencao">)
   Só o logo, um fio rosa e o aviso, centralizados na tela. Usa a mesma
   abertura do linkbio, em outra ordem: logo, fio, título, texto.
   ========================================================================== */
.manutencao .hero {
  flex: 1 0 auto;
  justify-content: center;
  padding: 56px 24px;
}
.manutencao .logo {
  width: 250px;
  margin: 0 auto;
}
.manutencao .hero__inner.is-visible .logo { animation-delay: .2s; }
.manutencao .hero__inner.is-visible .logo::after { animation-delay: 1.8s; }
.manutencao .hero__inner.is-visible .faisca { animation-delay: calc(1.2s + var(--f)); }

.manutencao__fio {
  display: block;
  width: 64px;
  height: 1.5px;
  margin: 34px auto 30px;
  background: var(--acao);
  scale: 0 1;
}
.hero__inner.is-visible .manutencao__fio { animation: fio-abre 1.1s var(--suave) .8s both; }
@keyframes fio-abre { to { scale: 1 1; } }

.manutencao .hero__title { --d: .95s; }
.manutencao__texto {
  --d: 1.35s;
  margin-top: 16px;
  font-size: 1rem;
  color: var(--texto);
}

/* ---- Celular ----------------------------------------------------------- */
@media (max-width: 767px) {
  .manutencao .logo { width: 210px; }
  .hero { padding: 64px 20px 48px; }
  .hero__title,
  .bloco__titulo { font-size: clamp(1.5rem, 7vw, 2.375rem); }
  .logo { width: var(--hero-logo-mobile); }

  .page {
    width: calc(100% - 32px);
    padding: 52px 24px 56px;
  }

  .bloco,
  .bloco--maleta {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 40px;
    text-align: center;
  }
  .bloco--maleta { margin-top: 72px; }
  .bloco--maleta .foto { order: 1; }         /* texto antes da foto, como na seção 1 */
  .bloco__texto { align-items: center; }
  .vantagens { text-align: left; }           /* bloco centrado, checks em coluna */
  .bloco__descricao { text-wrap: balance; }  /* centralizado: linhas do mesmo tamanho */

  .foto--quadrada { width: min(280px, 84%); }
  .foto--deslocada { width: min(260px, 78%); }
  /* no celular as fotos ficam abaixo do texto: entram quando aparecem */
  .bloco--comecar .foto { --d: .1s; }
  .bloco--maleta .bloco__titulo { --d: 0s; }
  .bloco--maleta .bloco__descricao { --d: .3s; }
  .bloco--maleta .botao { --d: .5s; }

  .fechamento { margin-top: 80px; }
  .fechamento .bloco__descricao br { display: none; }
  .fechamento .foto--centro { width: min(300px, 84%); }

  .obrigada { margin-top: 32px; }
  .obrigada__fundo { font-size: 4.5rem; }
  .obrigada__frente { font-size: 2rem; }
}

/* ---- Quem pede menos movimento: tudo parado e visível ------------------ */
@media (prefers-reduced-motion: reduce) {
  .bokeh, .faisca, .logo::after, .botao::after, .foto__play::before { display: none; }
  .video-modal[open], .video-modal[open]::backdrop { animation: none; }
  .page, .hero__inner, .logo, .anima-item, .anima-linhas .linha > span, .manutencao__fio,
  .vantagens li, .vantagens li::before, .foto .foto__janela, .foto img,
  .foto::before, .obrigada__fundo, .obrigada__frente > span {
    animation: none !important;
    opacity: 1;
    translate: none;
    scale: none;
    filter: none;
    clip-path: none;
  }
  .botao, .foto__janela { transition: none; }
  .botao:hover, .foto:hover .foto__janela { transform: none; }
}