/* ============================================================
   STARSEED CAFÉ · INGREDIENT FX — estilos de animación 3D
   ============================================================ */
.fx-host{position:relative;width:100%;height:100%;display:grid;place-items:center;perspective:900px;cursor:grab}
.fx-host:active{cursor:grabbing}
.fx-box{width:100%;height:100%}
.fx-stage{position:relative;width:100%;height:100%;display:grid;place-items:center;transform-style:preserve-3d;transition:transform .25s var(--ease-soft,cubic-bezier(.16,1,.3,1))}

/* halo luminoso del color del grupo */
.fx-halo{position:absolute;inset:6%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--gc,#9FE870) 42%,transparent),transparent 68%);
  filter:blur(8px);opacity:.7;animation:fxbreath 5s var(--ease-soft,ease-in-out) infinite}
@keyframes fxbreath{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.08);opacity:.85}}

/* imagen macro con giro 3D suave + flotación */
.fx-img{position:relative;z-index:1;width:92%;height:92%;object-fit:contain;border-radius:20px;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.5)) drop-shadow(0 0 24px color-mix(in srgb,var(--gc,#9FE870) 30%,transparent));
  will-change:transform}
/* latido sutil EN SU SITIO — sin rotación ni desplazamiento */
.fx-spin{animation:fxglow 6s var(--ease-soft,ease-in-out) infinite}
@keyframes fxglow{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.035);filter:brightness(1.06)}}
@keyframes fxfloat{0%,100%{margin-top:0}50%{margin-top:-3%}}

/* vídeo-loop AI */
.fx-video{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:22px;
  box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 36px color-mix(in srgb,var(--gc,#9FE870) 30%,transparent);
  background:#0d0a07}
.fx-host.fx-has-video .fx-halo{opacity:.45}

/* prisma iridiscente al pasar por encima */
.fx-stage::after{content:"";position:absolute;inset:0;border-radius:22px;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .4s;
  background:linear-gradient(115deg,transparent 38%,rgba(159,232,112,.18),rgba(111,230,214,.2),rgba(201,168,255,.2),rgba(255,194,71,.16),transparent 72%);background-size:240% 240%;animation:fxprism 8s var(--ease-soft,ease-in-out) infinite}
.fx-host:hover .fx-stage::after{opacity:.75}
@keyframes fxprism{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* pulso de giro al tocar (táctil) */
.fx-pulse .fx-img{animation:fxpulse 0.9s var(--ease-elastic,cubic-bezier(.34,1.56,.64,1))}
@keyframes fxpulse{0%{transform:rotateY(0) scale(1)}40%{transform:rotateY(220deg) scale(1.12)}100%{transform:rotateY(360deg) scale(1)}}

/* gema CSS de respaldo (sin imagen) */
.fx-stage.fx-gem{border-radius:50%}
.fx-gem .fx-gemcore{position:relative;z-index:1;width:64%;height:64%;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#fff,var(--gc,#9FE870) 44%,color-mix(in srgb,var(--gc,#9FE870) 36%,#000) 100%);
  box-shadow:0 0 26px color-mix(in srgb,var(--gc,#9FE870) 60%,transparent),inset -6px -8px 16px rgba(0,0,0,.4),inset 6px 6px 14px rgba(255,255,255,.5);
  animation:fxfloat 6s ease-in-out infinite}

/* héroe de la ficha "i" */
.fx-hero{position:relative}
.fx-hero .fx-box{position:absolute;inset:0}

/* micro-interacción en miniaturas de la matriz (todos los ingredientes, gratis) */
.ichip:hover .ingthumb,.func:hover .ingthumb{transform:translateY(-2px) scale(1.12) rotate(8deg);box-shadow:0 4px 14px color-mix(in srgb,var(--gc,#9FE870) 50%,transparent)}
.ingthumb{transition:transform .25s var(--ease-elastic,cubic-bezier(.34,1.56,.64,1)),box-shadow .25s}

@media (prefers-reduced-motion:reduce){
  .fx-spin,.fx-halo,.fx-stage::after,.fx-gem .fx-gemcore{animation:none !important}
}

/* ============================================================
   Tarjeta de ingrediente rediseñada (matriz funcional)
   ============================================================ */
/* icono de imagen en chips de bases/medios/endulzantes */
.chip-ic{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;overflow:hidden;flex:none;margin-right:3px;vertical-align:-8px;background:var(--bg-0);box-shadow:inset 0 0 0 1px var(--stroke)}
.chip-ic img{width:100%;height:100%;object-fit:cover}
.chip-ic .cic-emoji{display:none;font-size:13px;font-style:normal;line-height:1}
.chip-ic.noimg{background:var(--glass)}
.chip-ic.noimg .cic-emoji{display:block}
.ichip{align-items:center}
/* botón "i" de información dentro de los chips (bases/medios/endulzantes/sabores) */
.chip-i{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:6px;border-radius:50%;font-family:var(--serif);font-style:italic;font-weight:700;font-size:11px;color:var(--accent);background:var(--glass);border:1px solid var(--stroke);cursor:pointer;transition:.15s var(--ease-soft,ease);flex:none}
.chip-i:hover{background:color-mix(in srgb,var(--accent) 24%,transparent);transform:scale(1.18)}

.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:14px;margin-bottom:8px}
@media (max-width:520px){.fgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}

/* tarjeta de ingrediente — vertical, redondeada y orgánica (sin solapamientos) */
.fcard{display:flex;flex-direction:column;position:relative;overflow:hidden;
  border:1px solid var(--stroke);border-radius:26px 26px 32px 32px/30px 30px 26px 26px;
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));box-shadow:0 6px 20px rgba(0,0,0,.22);
  transition:transform .26s var(--ease-elastic,cubic-bezier(.34,1.56,.64,1)),box-shadow .3s,border-color .25s}
.fcard:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(0,0,0,.42);border-color:color-mix(in srgb,var(--gc) 50%,transparent)}
.fcard.on{border-color:color-mix(in srgb,var(--gc) 66%,transparent)}
.fcard.on::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--gc) 55%,transparent),inset 0 0 32px color-mix(in srgb,var(--gc) 16%,transparent)}

.fcard-media{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;cursor:pointer;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--gc) 18%,transparent),transparent 72%),var(--cacao,#2a1d12)}
.fcard-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32%;pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--glass-strong) 90%,transparent))}
.fcard-media:hover .fxm-img{transform:scale(1.06)}
.fcard-list{position:absolute;top:9px;left:9px;z-index:3;font-size:9.5px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:99px;backdrop-filter:blur(6px);color:var(--ink);background:rgba(0,0,0,.4)}
.fcard-list.verde{color:var(--neon-lime);background:color-mix(in srgb,var(--neon-lime) 22%,#0a0f08)}
.fcard-list.naranja{color:var(--neon-amber);background:color-mix(in srgb,var(--neon-amber) 22%,#120c05)}
.fcard-mg{position:absolute;top:9px;right:9px;z-index:3;font-size:9.5px;font-weight:700;color:var(--neon-amber);background:rgba(0,0,0,.45);padding:3px 9px;border-radius:99px;backdrop-filter:blur(6px)}

.fcard-info-area{padding:10px 13px 2px;display:flex;flex-direction:column;gap:5px}
.fcard-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.fcard-name{font-family:var(--serif);font-size:15.5px;font-weight:600;line-height:1.15}
.fcard-eff{font-size:9.5px;font-family:var(--mono);color:var(--gc);background:color-mix(in srgb,var(--gc) 14%,transparent);padding:2px 8px;border-radius:99px;white-space:nowrap;flex:none}
.fcard-taste{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;color:var(--ink-mute);line-height:1.4}
.fcard-dose{margin-top:2px;animation:fxslidein .35s var(--ease-soft,ease) both}
.fcard-dose .rng{max-width:100%}
.fcard-dose label{font-size:11px;color:var(--ink-soft);font-family:var(--mono)}
@keyframes fxslidein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.fcard-foot{display:flex;gap:8px;padding:10px 13px 13px;margin-top:auto}
.fcard-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:36px;border-radius:13px;font-size:12.5px;font-weight:700;border:1px solid var(--stroke);background:var(--glass);color:var(--ink-soft);cursor:pointer;transition:.18s var(--ease-elastic,cubic-bezier(.34,1.56,.64,1))}
.fcard-btn.info{flex:0 0 42px;font-size:15px;color:var(--accent)}
.fcard-btn.add{flex:1}
.fcard-btn:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--gc) 50%,transparent);color:var(--ink)}
.fcard-btn.add.on{background:var(--gc);color:#10140e;border-color:transparent;box-shadow:0 0 16px color-mix(in srgb,var(--gc) 45%,transparent)}

/* fxm — icono animado dentro del marco (hijo del .fcard-media) */
.fxm{position:absolute;inset:0;display:grid;place-items:center;perspective:700px}
.fxm-halo{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--gc) 38%,transparent),transparent 70%);filter:blur(6px);opacity:.6;animation:fxbreath 6s ease-in-out infinite}
.fxm-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fxm-img{position:relative;z-index:1;width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5));transition:transform .3s var(--ease-soft,ease);animation:fxglow 6s ease-in-out infinite}
.fxm-gem{place-items:center}
.fxm-core{position:relative;z-index:1;width:48%;height:48%;border-radius:50%;background:radial-gradient(circle at 36% 30%,#fff,var(--gc) 46%,color-mix(in srgb,var(--gc) 34%,#000) 100%);box-shadow:0 0 18px color-mix(in srgb,var(--gc) 55%,transparent),inset -4px -5px 10px rgba(0,0,0,.4),inset 4px 4px 9px rgba(255,255,255,.5);animation:fxfloat 6s ease-in-out infinite}
/* barrido iridiscente (cristal vivo) sobre el marco */
.fxm-shimmer{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 40%,rgba(159,232,112,.16),rgba(111,230,214,.18),rgba(201,168,255,.18),rgba(255,194,71,.14),transparent 72%);
  background-size:260% 260%;animation:fxsweep 8s var(--ease-soft,ease-in-out) infinite}
@keyframes fxsweep{0%{background-position:0% 50%;opacity:0}30%{opacity:.5}50%{background-position:100% 50%;opacity:.6}70%{opacity:.4}100%{background-position:0% 50%;opacity:0}}
/* partículas ascendentes (motas de luz) */
.fxm-spark{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.75;
  background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 1px,transparent 2px),radial-gradient(circle,color-mix(in srgb,var(--gc) 80%,#fff) 0 1px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.7) 0 1px,transparent 2px);
  background-repeat:no-repeat;background-size:auto;animation:fxrise 7s linear infinite}
@keyframes fxrise{0%{background-position:24% 96%,66% 100%,46% 104%;opacity:0}15%{opacity:.85}85%{opacity:.6}100%{background-position:24% 8%,66% 2%,46% -4%;opacity:0}}

/* transición escalonada de los datos en el modal "i" */
.modal.show .info-title{animation:fxcellin .5s var(--ease-soft,cubic-bezier(.16,1,.3,1)) both;animation-delay:.04s}
.modal.show .info-cell{animation:fxcellin .5s var(--ease-soft,cubic-bezier(.16,1,.3,1)) both}
.modal.show .info-cell:nth-child(1){animation-delay:.06s}
.modal.show .info-cell:nth-child(2){animation-delay:.12s}
.modal.show .info-cell:nth-child(3){animation-delay:.18s}
.modal.show .info-cell:nth-child(4){animation-delay:.24s}
.modal.show .info-cell:nth-child(5){animation-delay:.30s}
.modal.show .info-cell:nth-child(6){animation-delay:.36s}
.modal.show .info-cell:nth-child(7){animation-delay:.42s}
@keyframes fxcellin{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .fxm-img,.fxm-core,.fxm-halo,.fxm-shimmer,.fxm-spark,.fcard-dose,.modal.show .info-cell,.modal.show .info-title{animation:none !important}
  .fxm-spark,.fxm-shimmer{display:none}
}

/* ============================================================
   TARJETAS DE INGREDIENTE UNIFICADAS (bases · medios · endulzantes ·
   sabores): imagen HD + nombre + resumen de 1 línea. Rejilla que
   muestra ≥3 por fila en móvil y más en pantallas grandes. 3D HD por
   tarjeta (.ss-ing3d) reactivo al puntero/tacto.
   ============================================================ */
.ing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px;margin:4px 0 6px}
@media (min-width:560px){.ing-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px}}
@media (min-width:1100px){.ing-grid{grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:15px}}
.ing-grid.mini{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}

.ing-card{position:relative;display:flex;flex-direction:column;text-align:left;overflow:hidden;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--oro,#E9C46A) 18%,var(--stroke));border-radius:18px 18px 22px 22px/20px 20px 18px 18px;
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 5px 16px rgba(0,0,0,.24);
  transition:transform .24s var(--ease-elastic,cubic-bezier(.34,1.56,.64,1)),box-shadow .28s,border-color .22s;-webkit-tap-highlight-color:transparent}
.ing-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.38);border-color:color-mix(in srgb,var(--gc,#9FE870) 48%,transparent)}
.ing-card.on{border-color:color-mix(in srgb,var(--gc,#9FE870) 66%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--gc,#9FE870) 12%,var(--glass-strong)),var(--glass))}
.ing-card.on::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--gc,#9FE870) 60%,transparent),inset 0 0 26px color-mix(in srgb,var(--gc,#9FE870) 15%,transparent)}
.ing-card.ago{opacity:.62;filter:grayscale(.35)}

.ing-card-media{position:relative;width:100%;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;perspective:600px;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--gc,#9FE870) 20%,transparent),transparent 72%),var(--cacao,#241608)}
.ing-card-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--glass-strong) 92%,transparent))}
.ing-card-img{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5));transition:transform .28s var(--ease-soft,ease);will-change:transform;transform-style:preserve-3d}
.ing-card:hover .ing-card-img{transform:scale(1.05)}
.ing-card-emoji{display:none;font-size:42px;line-height:1;font-style:normal;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}
.ing-card-media.noimg{background:radial-gradient(circle at 38% 30%,color-mix(in srgb,var(--gc,#9FE870) 60%,#fff),color-mix(in srgb,var(--gc,#9FE870) 26%,#1b1410) 64%,#140e09 100%)}
.ing-card-media.noimg .ing-card-emoji{display:block}
.ing-card-media.noimg .ing-card-img{display:none}
.ing-card-tag{position:absolute;top:7px;left:7px;z-index:3;font-size:9px;font-weight:700;letter-spacing:.02em;padding:2px 7px;border-radius:99px;color:var(--neon-amber);background:rgba(0,0,0,.5);backdrop-filter:blur(5px)}

.ing-card-body{display:flex;flex-direction:column;gap:3px;padding:9px 11px 11px}
.ing-card-head{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.ing-card-name{font-family:var(--serif);font-size:clamp(13px,1.35vw,15px);font-weight:600;line-height:1.12}
.ing-card-note{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:clamp(10px,1vw,11.5px);color:var(--ink-mute);line-height:1.35}
.ing-card .pct{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--gc,#9FE870)}
.ing-card .abv-tag{font-family:var(--mono);font-size:9px;font-weight:700;color:var(--rojo,#C05C3B);border:1px solid color-mix(in srgb,var(--rojo,#C05C3B) 40%,transparent);border-radius:6px;padding:0 4px}
.ing-card-check{position:absolute;top:7px;right:7px;z-index:3;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#10140e;background:var(--gc,#9FE870);box-shadow:0 0 12px color-mix(in srgb,var(--gc,#9FE870) 55%,transparent)}
.ing-card-i{position:absolute;bottom:9px;right:9px;z-index:3;width:22px;height:22px;font-size:11px}
.ing-card .ago-badge{font-size:9px}

/* hook 3D HD por tarjeta: el contenedor reacciona al puntero/tacto/pulsación */
.ss-ing3d{cursor:grab}
.ss-ing3d:active{cursor:grabbing}
@media (prefers-reduced-motion:reduce){ .ing-card-img{transition:none} .ing-card:hover{transform:none} }