/* Animación de las fotos de producto: cruce lento entre dos imágenes y, al pasar el cursor, frena en una tercera.
   Sin 2da/3ra foto real se usan encuadres de detalle de la misma imagen. */
.card-media { overflow: hidden; }
.frames { position: absolute; inset: 0; display: block; overflow: hidden; --d: calc(var(--i, 0) * -2.7s); }
.frames .fr {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; padding: 0;
  transform-origin: 50% 50%; will-change: opacity, transform; backface-visibility: hidden;
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1);
}

/* Foto 1: siempre visible, respira muy despacio */
.frames .fr-1 { opacity: 1; animation: frBreath 16s ease-in-out infinite alternate; animation-delay: var(--d); }
/* Foto 2: aparece y se va (ciclo de 12 s, desfasado por tarjeta para que no cambien todas a la vez) */
.frames .fr-2 { opacity: 0; animation: frCross 12s ease-in-out infinite, frDrift 12s ease-in-out infinite; animation-delay: var(--d), var(--d); }
/* Foto 3: espera oculta; solo se muestra al pasar el cursor */
.frames .fr-3 { opacity: 0; transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform 1.8s cubic-bezier(.22, 1, .36, 1); }

/* Encuadres de detalle cuando hay una sola foto */
.frames.crop .fr-2 { transform-origin: 50% 36%; }
.frames.crop .fr-3 { transform: scale(1.85); transform-origin: 66% 62%; }
.frames.crop .fr-2 { animation-name: frCrossCrop, frDriftCrop; }

@keyframes frBreath { from { transform: scale(1); } to { transform: scale(1.055); } }
@keyframes frCross { 0%, 36% { opacity: 0; } 50%, 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes frCrossCrop { 0%, 36% { opacity: 0; } 50%, 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes frDrift { 0% { transform: scale(1.02) translate3d(0, 0, 0); } 100% { transform: scale(1.09) translate3d(-1.2%, -1%, 0); } }
@keyframes frDriftCrop { 0% { transform: scale(1.5) translate3d(0, 0, 0); } 100% { transform: scale(1.68) translate3d(-1.5%, 1%, 0); } }

/* Hover / foco: se corta el ciclo y se muestra la tercera foto con un zoom lento */
@media (hover: hover) {
  .card:hover .card-media .frames .fr-1 { animation-play-state: paused; }
  .card:hover .card-media .frames .fr-2 { animation: none; opacity: 0; }
  .card:hover .card-media .frames .fr-3 { opacity: 1; }
  .card:hover .card-media .frames.real .fr-3 { transform: scale(1.07); }
  .card:hover .card-media .frames.crop .fr-3 { transform: scale(2.0); }
}
.card:focus-within .card-media .frames .fr-2 { animation: none; opacity: 0; }
.card:focus-within .card-media .frames .fr-3 { opacity: 1; }

/* Pisa la regla genérica de zoom por hover del catálogo */
.card:hover .card-media .frames .fr-1 { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .frames .fr-1, .frames .fr-2 { animation: none; }
  .frames .fr-2 { opacity: 0; }
  .frames .fr-3 { transition: opacity .3s; }
}

/* ---------- Botones de la tienda: feedback premium ---------- */
.btn-light, .btn-ghost, .btn-outline, .btn-brown, .btn-solid, .to-top, .join-form button { position: relative; overflow: hidden; isolation: isolate; transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s, background .35s, color .35s, border-color .35s; }
.btn-light::after, .btn-brown::after, .btn-solid::after, .btn-outline::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-130%); transition: transform .8s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.btn-light:hover::after, .btn-brown:hover::after, .btn-solid:hover::after { transform: translateX(130%); }
.btn-light:hover, .btn-brown:hover:not(:disabled), .btn-solid:hover:not(:disabled), .btn-ghost:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -16px rgba(255,122,0,.7); }
.btn-light:active, .btn-ghost:active, .btn-outline:active, .btn-brown:active, .btn-solid:active, .to-top:active, .card-add:active { transform: scale(.96) translateY(0); box-shadow: none; }
.card-add { transition: transform .5s cubic-bezier(.22,1,.36,1), background .3s, color .3s; }
.card-add.is-done { background: #1f7a3d !important; color: #fff !important; animation: addPop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes addPop { 0% { transform: scale(.92); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.icon-btn { transition: background .3s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.icon-btn:active { transform: scale(.88); }
.cart-count.bump { animation: bump .6s cubic-bezier(.34,1.56,.64,1); }
.ci { transition: opacity .3s, transform .3s; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn-light::after, .btn-brown::after, .btn-solid::after, .btn-outline::after { display: none; } }