/* ════════════════════════════════════════════════════════════════════════
   tarjetas.css — TRATAMIENTO V3 DE TARJETAS DE PRODUCTO (FUENTE ÚNICA)
   ════════════════════════════════════════════════════════════════════════
   Halo difuso oro→fucsia + aro de eclipse (--ecl) + sombra de apoyo (piso) +
   zoom suave (1.10 / .8s) + fade-in. Lo consumen TODAS las caras públicas
   (home, catálogo, fichas, mayoristas) a través de DOS clases-marcador:

     .card-fx        → la TARJETA (dispara el hover)
     .card-fx-photo  → la CAJA de la foto (requiere position:relative; overflow:visible,
                       que pone el layout propio de cada página)

   El brillo por silueta (--gk) y la detección de caja blanca (.img-boxed) los
   pone js/tarjetas.js (window.processCardImages), que hay que re-ejecutar tras
   cada render por fetch.

   OJO: acá vive SOLO el tratamiento de la FOTO. La elevación/sombra de la
   tarjeta, su borde, su tipografía y la "vida" propia del home (contador,
   comillas, sheen) NO se centralizan acá. Depende de variables ya definidas
   en web.css (--vida-tr, --glow-box, --glow-box-hover), que carga ANTES.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --cfx-zoom:    1.10;   /* zoom de la foto al hover */
  --cfx-zoom-tr: .8s;    /* duración del zoom (suave) */
}

/* Geometría afinable de la sombra de apoyo: cada caja puede sobreescribir el
   bottom según su padding (la del home-promo, p. ej., usa 9%). */
.card-fx-photo{ --cfx-shadow-bottom: 11%; }

/* ── Sombra de apoyo (piso) — SOLO recortes (no fotos con caja blanca) ── */
.card-fx-photo:not(.img-boxed)::after{
  content:"";position:absolute;left:24%;right:24%;bottom:var(--cfx-shadow-bottom);height:12px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(58,40,20,.20) 0%,rgba(58,40,20,.08) 45%,transparent 72%);
  filter:blur(4px);transition:all var(--vida-tr) cubic-bezier(.2,.7,.2,1);pointer-events:none;z-index:0}
.card-fx:hover .card-fx-photo:not(.img-boxed)::after{
  left:20%;right:20%;background:radial-gradient(ellipse,rgba(58,40,20,.26) 0%,rgba(58,40,20,.10) 45%,transparent 72%)}

/* ── Halo de CONTORNO de la foto (sigue la silueta vía --gk del JS).
      Reposo = ORO luminoso; hover = FLORECE a fucsia + aro de eclipse (--ecl). ── */
.card-fx-photo img{
  --gk:1;--ecl:1;position:relative;z-index:1;
  filter:drop-shadow(0 4px 5px rgba(58,40,20,.07)) drop-shadow(0 0 26px rgba(201,160,74,calc(.30 * var(--gk)))) drop-shadow(0 0 2px rgba(201,160,74,calc(.15 * var(--ecl)))) drop-shadow(0 0 5px rgba(201,160,74,calc(.08 * var(--ecl))));
  transition:filter var(--vida-tr) ease, transform var(--cfx-zoom-tr) cubic-bezier(.2,.7,.2,1)}
.card-fx:hover .card-fx-photo img{
  filter:drop-shadow(0 8px 9px rgba(58,40,20,.10)) drop-shadow(0 0 40px rgba(224,33,138,calc(.5 * var(--gk)))) drop-shadow(0 0 2px rgba(224,33,138,calc(.22 * var(--ecl)))) drop-shadow(0 0 5px rgba(224,33,138,calc(.12 * var(--ecl))));
  transform:scale(var(--cfx-zoom))}

/* ── Fotos con CAJA/fondo blanco (.img-boxed lo pone el JS): sin halo de
      silueta; resplandor SUAVE de respaldo. ── */
.card-fx-photo.img-boxed img{filter:none}
.card-fx-photo.img-boxed::before{content:"";position:absolute;inset:10%;border-radius:50%;background:var(--glow-box);filter:blur(7px);transition:background var(--vida-tr) ease;pointer-events:none;z-index:0}
.card-fx:hover .card-fx-photo.img-boxed::before{background:var(--glow-box-hover)}

/* ── Fade-in de la foto al cargar (la clase .is-loaded la pone processCardImages).
      CLAVE: si una página usa .card-fx-photo SIN cargar js/tarjetas.js, las fotos
      quedarían invisibles (opacity:0 sin .is-loaded). Siempre van juntos. ── */
.card-fx-photo img{opacity:0}
.card-fx-photo img.is-loaded{opacity:1;transition:opacity .5s ease, filter var(--vida-tr) ease, transform var(--cfx-zoom-tr) cubic-bezier(.2,.7,.2,1)}

/* ── Accesibilidad por teclado ── */
.card-fx:focus-visible{outline:none;border-color:rgba(224,33,138,.5);box-shadow:0 0 0 3px rgba(201,160,74,.4),0 12px 26px -14px rgba(58,47,38,.18)}

/* ── Respeto a prefers-reduced-motion: anula el zoom de la foto ── */
@media (prefers-reduced-motion: reduce){
  .card-fx:hover .card-fx-photo img{transform:none}
}