/* ==========================================================================
   Formato 4:5: galería de fotografías con destello de flash.
   ========================================================================== */

#formatos .art-d {
  background: #000000;
}

.ph {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .6s ease;
}

.ph.on {
  opacity: 1;
}

.ph svg, .ph .pwrap {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.ph.on svg, .ph.on .pwrap {
  animation: phKB 3.6s ease-out both;
}

@keyframes phKB {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}

.ph-prod {
  background: linear-gradient(180deg,#E6F2F4 0 68%,#C9DFE3 68%);
}

.ph-prod .bottle {
  position: absolute;
  left: 36%;
  width: 28%;
  top: 22%;
  height: 52%;
  background: #000000;
  border-radius: 14% 14% 6% 6%/8% 8% 3% 3%;
}

.ph-prod .bshadow {
  position: absolute;
  left: 28%;
  width: 44%;
  top: 71%;
  height: 6%;
  border-radius: 50%;
  background: rgba(0,0,0,.28);
  filter: blur(4px);
}

.ph-fam .fcloud, .ph-fam .fcloud2, .ph-fam .fbranch {
  transform-box: view-box;
}

.ph-fam.on .fcloud {
  animation: phDrift 4s ease-in-out both;
}

.ph-fam.on .fcloud2 {
  animation: phDrift2 4s ease-in-out both;
}

.ph-fam .fbranch {
  transform-origin: 102px 17px;
}

.ph-fam.on .fbranch {
  animation: phSway 1.6s ease-in-out infinite alternate;
}

@keyframes phDrift {
  from {
    transform: translateX(-3px);
  }
  to {
    transform: translateX(3px);
  }
}

@keyframes phDrift2 {
  from {
    transform: translateX(2px);
  }
  to {
    transform: translateX(-2px);
  }
}

@keyframes phSway {
  from {
    transform: rotate(-2deg);
  }
  to {
    transform: rotate(2deg);
  }
}

.ph-fam .kid {
  transform-box: fill-box;
  transform-origin: center bottom;
}

.ph-fam.on .kid {
  animation: phHop .5s 1s ease-out 2 alternate;
}

@keyframes phHop {
  to {
    transform: translateY(-6px);
  }
}

.ph-land .lsun {
  transform-box: fill-box;
  transform-origin: center;
}

.ph-land.on .lsun {
  animation: phSun 3.6s ease-out both;
}

@keyframes phSun {
  from {
    transform: translateY(10px);
  }
  to {
    transform: translateY(0);
  }
}

.flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #FFFFFF;
  opacity: 0;
  pointer-events: none;
}

.flash.go {
  animation: phFlash .45s ease-out;
}

@keyframes phFlash {
  0% {
    opacity: .85;
  }
  100% {
    opacity: 0;
  }
}

.art-d .fmt {
  z-index: 4;
}

#formatos .art-d.art .fmt {
  background: #FFFFFF;
  color: #000000;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}