/* Veganismo: fotografías veladas y apertura continua del contador. */
.al-razon3-dorso > .al-razon3-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  opacity: .46;
  filter: saturate(.65) contrast(1.05);
  pointer-events: none;
  z-index: 0;
}
.al-razon3:nth-child(2) .al-razon3-foto { object-position: 50% 50%; }
.al-razon3-dorso::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0b0710b8, #0b07102e 52%, #0b0710e6);
  pointer-events: none;
  z-index: 1;
}
.al-razon3-dorso > :not(.al-razon3-foto):not(.al-dorso-lluvia) { position: relative; z-index: 2; }
.al-razon3-dorso .al-dorso-lluvia { z-index: 2; }
.al-razon3-dorso .al-dorso-t { color: #f4efe9; }
.al-razon3-dorso small { color: #d5cbdc; }
.al-dorso-barras span { color: #e8deed; }

.al-con-salida {
  transition: grid-template-rows .68s cubic-bezier(.25,.1,.25,1), opacity .55s ease;
}
.al-con-salida-in > .al-con-salida-inner {
  opacity: 1;
  transform: translateY(6px);
  transition: transform .68s cubic-bezier(.25,.1,.25,1);
  transition-delay: 0s;
}
.al-con-abierto .al-con-salida-in > .al-con-salida-inner { transform: none; transition-delay: 0s; }
.al-con-salida-inner > *, .al-con-abierto .al-con-salida-inner > * {
  opacity: 1;
  transform: none;
  transition: none;
  transition-delay: 0s;
}
.al-con-salida-inner::before { transition: opacity .5s ease; }

/* Las fotos cambian detrás de un velo fijo: el texto nunca se desvanece. */
.al-envase-dorso { isolation: isolate; overflow: hidden; }
.al-envase-fotos { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; background: #0b0710; }
.al-envase-fotos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  filter: saturate(.55);
  transition: opacity 1.6s ease-in-out;
}
.al-envase-fotos img.al-activa { opacity: .4; }
.al-envase-fotos::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0b0710a6, #0b071073 45%, #0b0710b8);
}
.al-envase-dorso > :not(.al-envase-fotos):not(.al-envase-volver) { position: relative; z-index: 1; }
.al-envase-dorso .al-envase-volver { z-index: 2; background: #0b0710bf; }
.al-envase-dorso .al-et-fila dd { color: #f4efe9; }
.al-envase-dorso .al-et-fila small { color: #c9bfce; }
.al-envase-pausa {
  display: block;
  margin: 14px 0 0 auto;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid #f4efe936;
  border-radius: 99px;
  background: #0b0710bf;
  color: #e0d6e7;
  font: inherit;
  font-size: .7rem;
  cursor: pointer;
}
.al-envase-pausa:focus-visible { outline: 2px solid #cfa8ef; outline-offset: 3px; }
.al-envase-pausa[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .al-razon3-cara, .al-razon3-dorso, .al-envase-frente { transition: none; }
  .al-con-salida, .al-con-salida-in > .al-con-salida-inner, .al-con-salida-inner::before { transition: none; transform: none; }
  .al-envase-fotos img { transition: none; }
}