/* MAFARED · Fase 6.1 · paginación, imagen con zoom y microinteracciones */
/* Paginación del catálogo */
#catalogo-resultados {scroll-margin-top:130px;}
.f61-paginacion {display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:30px 3px 18px;margin:0 auto 15px;}
.f61-paginacion[hidden] {display:none!important;}
.f61-paginacion-info {font-size:.85rem;color:#4a6984;font-weight:750;}
.f61-paginacion-botones {display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:7px;}
.f61-pagina-boton {font-family:inherit;display:grid;place-items:center;min-width:43px;min-height:43px;padding:9px 13px;border:1px solid #cfdfec;border-radius:12px;background:#fff;color:#0b497a;font-size:.88rem;font-weight:830;cursor:pointer;box-shadow:0 4px 13px rgba(4,53,103,.04);transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
.f61-pagina-boton:not(:disabled):hover {background:#e9f5ff;border-color:#6bb6e9;transform:translateY(-2px);box-shadow:0 8px 18px rgba(5,103,170,.12);}
.f61-pagina-boton.f61-pagina-activa {background:#0877c9;color:#fff;border-color:#0877c9;box-shadow:0 8px 18px rgba(7,119,201,.2);}
.f61-pagina-boton:disabled {opacity:.35;cursor:default;box-shadow:none;}
.f61-pagina-boton:focus-visible, .f61-zoom-controles button:focus-visible {outline:3px solid #40b3fb;outline-offset:3px;}
.f61-pagina-puntos {display:flex;justify-content:center;align-items:center;min-width:20px;color:#7695ad;}
/* Entrada sutil después de cambiar filtros o de página */
.tarjeta-producto.f61-entrada {animation:f61-aparicion .42s cubic-bezier(.16,.84,.34,1) both;}
@keyframes f61-aparicion {from {opacity:0;transform:translateY(13px) scale(.987);}to {opacity:1;transform:translateY(0) scale(1);}}
/* Un brillo leve en la fotografía al pasar el cursor: sin deformar los envases */
.tarjeta-producto .imagen-producto {position:relative;isolation:isolate;}
.tarjeta-producto .imagen-producto::after {content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.33) 48%,transparent 65%);transform:translateX(-160%);pointer-events:none;transition:transform .65s ease;}
@media(hover:hover) { .tarjeta-producto:hover .imagen-producto::after {transform:translateX(160%);} .tarjeta-producto .imagen-producto img {cursor:zoom-in;} }
/* Zoom de foto principal dentro de 'Ver detalles' */
.fase3-foto-principal {isolation:isolate;}
#fase3-imagen-principal {transform-origin:center center;transition:transform .24s ease-out;user-select:none;-webkit-user-drag:none;cursor:zoom-in;}
.fase3-foto-principal.f61-zoom-activo {touch-action:none;cursor:grab;}
.fase3-foto-principal.f61-zoom-activo #fase3-imagen-principal {cursor:grab;}
.fase3-foto-principal.f61-arrastrando #fase3-imagen-principal {transition:none;cursor:grabbing;}
.f61-zoom-controles {position:absolute;z-index:2;left:13px;top:13px;display:flex;align-items:center;gap:3px;padding:5px;border:1px solid #dae8f2;border-radius:13px;background:rgba(255,255,255,.95);box-shadow:0 7px 24px rgba(10,48,80,.12);backdrop-filter:blur(7px);}
.f61-zoom-controles button {display:grid;place-items:center;width:33px;height:33px;border-radius:9px;border:0;background:transparent;color:#086bb5;cursor:pointer;transition:background .18s ease,transform .18s ease;}
.f61-zoom-controles button:not(:disabled):hover {background:#eaf5fd;transform:scale(1.05);}
.f61-zoom-controles button:disabled {opacity:.3;cursor:default;}
.f61-zoom-controles output {min-width:49px;text-align:center;color:#123e63;font-size:.75rem;font-weight:850;font-variant-numeric:tabular-nums;}
.f61-zoom-ayuda {font-size:.73rem;line-height:1.5;color:#617d94;margin:10px 0 0;}
.f61-zoom-ayuda i {color:#0877c9;margin-right:4px;}
@media(max-width:530px){.f61-paginacion {flex-direction:column;align-items:center;gap:10px;padding-top:23px;}.f61-paginacion-botones {justify-content:center;gap:5px;}.f61-pagina-boton {min-height:42px;min-width:41px;padding:8px 11px;}.f61-zoom-controles {top:9px;left:9px;padding:3px;}.f61-zoom-controles button {width:31px;height:31px;}.f61-zoom-ayuda {font-size:.69rem;}}
@media(prefers-reduced-motion:reduce){.tarjeta-producto.f61-entrada {animation:none!important;}.f61-pagina-boton,.tarjeta-producto .imagen-producto::after,#fase3-imagen-principal {transition:none!important;}}