/* ═══════════════════════════════════════════════════════════
   TIENDA HOLOGRÁFICA — icono con partículas
   Arriba y ordenada. No le quita protagonismo a Winston: es una
   franja compacta, no un bloque grande.
   ═══════════════════════════════════════════════════════════ */

.holo-tienda {
  position: relative;
  margin: 1.6rem 0 2.4rem;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(120, 200, 255, .28);
  background:
    linear-gradient(120deg, rgba(20,40,70,.55), rgba(30,20,60,.45));
  backdrop-filter: blur(16px);
  box-shadow:
    0 0 0 1px rgba(120,200,255,.08),
    0 18px 50px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(160,220,255,.14);
  transition: .35s;
}
.holo-tienda:hover {
  border-color: rgba(140,220,255,.5);
  box-shadow:
    0 0 0 1px rgba(120,200,255,.2),
    0 24px 60px rgba(0,0,0,.55),
    0 0 60px rgba(77,160,255,.18),
    inset 0 1px 0 rgba(180,230,255,.2);
}

#holoLienzo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* contenido en fila: icono · texto · botón */
.holo-contenido {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 1.2rem;
  padding: 1.3rem 1.5rem;
}

/* ── ICONO HOLOGRÁFICO ─────────────────────────────────────────────────── */
.holo-icono {
  position: relative; flex-shrink: 0;
  width: 68px; height: 68px;
  display: flex; align-items: center; justify-content: center;
  color: #9fe0ff;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(80,180,255,.16), rgba(150,100,255,.12));
  border: 1px solid rgba(140,215,255,.38);
  box-shadow:
    inset 0 0 22px rgba(100,190,255,.22),
    0 0 30px rgba(77,160,255,.28);
  animation: holoFlota 4.2s ease-in-out infinite;
}
/* reinicio del brillo que recorre el icono */
.holo-icono::after {
  content: ''; position: absolute; inset: 0; border-radius: 18px;
  background: linear-gradient(115deg, transparent 35%, rgba(190,235,255,.45) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: holoBrillo 3.4s linear infinite;
  pointer-events: none;
}
@keyframes holoFlota {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-4px) rotate(-1.5deg); }
}
@keyframes holoBrillo {
  0%   { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}
/* anillo holográfico girando */
.holo-icono::before {
  content: ''; position: absolute; inset: -7px;
  border-radius: 22px;
  border: 1px dashed rgba(140,215,255,.35);
  animation: holoGira 14s linear infinite;
  pointer-events: none;
}
@keyframes holoGira {
  to { transform: rotate(360deg); }
}

/* ── TEXTO ─────────────────────────────────────────────────────────────── */
.holo-texto { flex: 1; min-width: 0; }
.holo-texto b {
  display: block;
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em;
  color: #eaf6ff;
  text-shadow: 0 0 20px rgba(120,200,255,.35);
  margin-bottom: .2rem;
}
.holo-texto span {
  display: block;
  font-size: .86rem; color: #9db4cc; line-height: 1.5;
}

/* ── BOTÓN ─────────────────────────────────────────────────────────────── */
.holo-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none;
  font-size: .9rem; font-weight: 700;
  color: #04121f;
  background: linear-gradient(135deg, #9fe0ff, #6fb8ff);
  border-radius: 999px;
  padding: .85rem 1.4rem;
  box-shadow: 0 8px 26px rgba(110,190,255,.38);
  transition: .25s;
  white-space: nowrap;
}
.holo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(110,190,255,.55);
  background: linear-gradient(135deg, #b8e9ff, #8cc8ff);
}
.holo-btn svg { transition: transform .25s; }
.holo-btn:hover svg { transform: translateX(3px); }

/* ── RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .holo-contenido {
    flex-wrap: wrap;
    padding: 1.1rem 1.2rem;
    gap: .9rem;
  }
  .holo-texto { flex-basis: calc(100% - 84px); }
  .holo-btn { width: 100%; justify-content: center; }
  .holo-icono { width: 58px; height: 58px; }
}