/* ============================================================
   Credicell — Capa visual de rediseño (ADITIVA)
   - No reemplaza estilos del tema; solo añade efectos.
   - Se activa sobre elementos que credicell-rediseno.js etiqueta
     con clases cc-* (para no depender de clases Tailwind con [ ]).
   - Respeta prefers-reduced-motion.
   ============================================================ */

:root{
  --cc-glow: 90,190,255;
  --cc-ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Animaciones de entrada (secciones) ---------- */
.cc-sec{opacity:0;transform:translateY(22px);transition:opacity .7s var(--cc-ease),transform .7s var(--cc-ease)}
.cc-sec.cc-in{opacity:1;transform:none}
.cc-sec.cc-d1{transition-delay:.08s}.cc-sec.cc-d2{transition-delay:.16s}.cc-sec.cc-d3{transition-delay:.24s}

/* ---------- Menú: subrayado animado + desplegable suave ---------- */
.desktop-category-pill{position:relative;transition:color .2s}
.desktop-category-pill::after{content:"";position:absolute;left:18px;right:18px;bottom:-4px;height:2px;border-radius:2px;background:#E91E63;transform:scaleX(0);transform-origin:left;transition:transform .28s var(--cc-ease)}
.desktop-category-item:hover .desktop-category-pill::after{transform:scaleX(1)}
.desktop-category-item > div[class*="absolute"]{transition:opacity .22s var(--cc-ease),transform .22s var(--cc-ease);transform:translateY(8px)}
.desktop-category-item:hover > div[class*="absolute"]{transform:translateY(0)}

/* ---------- Carrusel: cursor y desplazamiento por borde ---------- */
.cc-row{cursor:ew-resize;scroll-behavior:auto !important}

/* ---------- Tarjeta de producto: elevación + holograma 3D ---------- */
.cc-card{transition:transform .28s var(--cc-ease),box-shadow .28s var(--cc-ease);will-change:transform}
.cc-card:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(6,12,59,.14);z-index:20;position:relative}
.cc-ph{position:relative;perspective:1000px}
.cc-card:hover .cc-ph{overflow:visible !important}
.cc-ph img{transition:transform .4s var(--cc-ease),filter .4s var(--cc-ease);transform-style:preserve-3d;will-change:transform,filter}
/* Holograma: el producto se despega y gira 360° */
.cc-holo .cc-card:hover .cc-ph img{
  animation:ccHoloSpin 3.2s linear infinite;
  filter:brightness(1.1) contrast(1.05) saturate(1.15)
         drop-shadow(0 18px 26px rgba(0,0,0,.35))
         drop-shadow(0 0 28px rgba(var(--cc-glow),.9));
}
@keyframes ccHoloSpin{
  0%{transform:translateY(-14px) scale(1.14) rotateY(0deg)}
  100%{transform:translateY(-14px) scale(1.14) rotateY(360deg)}
}
/* Piso luminoso bajo el producto */
.cc-holo .cc-card:hover .cc-ph::after{content:"";position:absolute;left:50%;bottom:8px;width:56%;height:14px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(var(--cc-glow),.6),transparent 70%);filter:blur(4px);
  animation:ccHoloBase 3.2s ease-in-out infinite;pointer-events:none;z-index:1;border-radius:50%}
@keyframes ccHoloBase{0%,100%{opacity:.5;width:54%}50%{opacity:.9;width:66%}}
/* Líneas de escaneo + destello holográfico */
.cc-holo .cc-card:hover .cc-ph::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;mix-blend-mode:screen;border-radius:inherit;
  background:repeating-linear-gradient(0deg,rgba(120,210,255,.10) 0 2px,transparent 2px 5px),
             linear-gradient(115deg,transparent 35%,rgba(150,205,255,.32) 50%,transparent 65%);
  background-size:100% 100%,260% 260%;animation:ccHoloShine 1.8s linear infinite}
@keyframes ccHoloShine{from{background-position:0 0,120% 120%}to{background-position:0 0,-20% -20%}}

/* ---------- Sprite 3D por producto (varios ángulos en una imagen) ---------- */
/* El JS le da tamaño cuadrado al pasar el mouse y solo entonces descarga la imagen. */
.cc-sprite{position:absolute;left:50%;top:50%;width:70%;height:70%;transform:translate(-50%,-50%);background-repeat:no-repeat;background-position:0% 0%;opacity:0;pointer-events:none;z-index:2;transition:opacity .3s,transform .35s var(--cc-ease)}
.cc-card.cc-sprite-on .cc-sprite.cc-sprite-ready{opacity:1}
.cc-holo .cc-card.cc-sprite-on .cc-sprite{transform:translate(-50%,-50%) translateY(-10px) scale(1.08);
  filter:brightness(1.06) saturate(1.1) drop-shadow(0 16px 22px rgba(0,0,0,.28)) drop-shadow(0 0 24px rgba(var(--cc-glow),.75))}
/* Mientras gira el sprite se oculta la foto de frente (el sprite aporta la rotación) */
.cc-card.cc-sprite-on.cc-sprite-loaded .cc-ph img{opacity:0 !important;animation:none !important}
.cc-holo .cc-card.cc-has-sprite:hover .cc-ph img{animation:none;filter:none}

/* ---------- Accesibilidad: sin movimiento si el usuario lo pide ---------- */
@media (prefers-reduced-motion: reduce){
  .cc-sec{opacity:1;transform:none;transition:none}
  .cc-holo .cc-card:hover .cc-ph img,.cc-holo .cc-card:hover .cc-sprite{animation:none}
  .cc-card,.cc-ph img{transition:none}
}