/* ==========================================================================
   DTI PROS · Tienda y personalizador (tienda-dti.php, tienda-3d.php, tienda-uv.php)
   Estructura del master Innuro: hero con foto fundida a la derecha, tarjeta del
   personalizador [dtf-store] y tira de servicios (footer.css).
   Entrada del hero, chips y migas en header.css (.thero, [data-intro])
   ========================================================================== */

/* Hero con la foto fundida en el fondo oscuro */
.tienda-hero { position: relative; overflow: hidden; padding: clamp(44px, 6vw, 88px) 0 clamp(52px, 6vw, 92px); background: var(--bg); }
.tienda-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3; background: linear-gradient(90deg, transparent, var(--blue) 30%, var(--blue-3) 50%, var(--gold) 70%, transparent); box-shadow: 0 0 18px var(--glow); }
.tienda-hero-art { position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: 60%; max-width: 960px; overflow: hidden; pointer-events: none; }
.tienda-hero-art-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .8; animation: tiendaZoom 18s ease-in-out infinite alternate; }
@keyframes tiendaZoom { from { transform: scale(1.02); } to { transform: scale(1.12) translateX(-2%); } }
/* Fusión: negro a la izquierda, bordes fundidos y brillo azul */
.tienda-hero-overlay { position: absolute; inset: 0; background:
  linear-gradient(to right, var(--bg) 0%, rgba(4, 7, 15, .95) 12%, rgba(4, 7, 15, .7) 32%, rgba(4, 7, 15, .25) 62%, rgba(4, 7, 15, .15) 85%, rgba(4, 7, 15, .45) 100%),
  linear-gradient(to bottom, var(--bg) 0%, transparent 22%, transparent 78%, var(--bg) 100%),
  radial-gradient(ellipse 60% 70% at 70% 50%, rgba(31, 91, 255, .22) 0%, transparent 70%); }
/* Línea de escaneo azul que recorre la foto */
.tienda-hero-art::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(76, 132, 255, .16) 85%, rgba(143, 176, 255, .55) 99%, transparent); mix-blend-mode: screen; transform: translateY(-110%); animation: tiendaScan 7s cubic-bezier(.6, 0, .4, 1) infinite 1.5s; }
@keyframes tiendaScan { 0% { transform: translateY(-110%); } 45%, 100% { transform: translateY(380%); } }
.tienda-hero-wrap { position: relative; z-index: 2; }
.tienda-hero-content { max-width: 660px; }
.tienda-hero .thero__title { font-size: clamp(56px, 7.6vw, 116px); text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }
.tienda-hero .thero__lead { text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.tienda-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tienda-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(143, 176, 255, .3); background: rgba(4, 7, 15, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font: 700 14px/1 var(--label); letter-spacing: .1em; text-transform: uppercase; transition: border-color .2s; }
.tienda-badge:hover { border-color: var(--blue-2); }
.tienda-badge svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--blue-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Personalizador del plugin (tarjeta clara, como en el master) */
.tienda-body { padding: clamp(36px, 5vw, 72px) 0 clamp(56px, 7vw, 104px); background: radial-gradient(60% 60% at 50% 0%, rgba(31, 91, 255, .14), transparent 70%); }
.tienda-card { min-height: 480px; padding: clamp(14px, 2.4vw, 28px); border-radius: 22px; border: 1px solid rgba(143, 176, 255, .35); background: #ffffff00; color: #161616; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 60px -20px rgba(31, 91, 255, .35); }
.tienda-card a { color: inherit; }
.tienda-card a:hover { color: #1A4BD6; }
.tienda-card__fallback { margin: 0; padding: 40px 0; text-align: center; color: #6b7280; font-style: italic; }

@media (max-width: 992px) {
  .tienda-hero-art { width: 75%; }
  .tienda-hero-art-img { opacity: .55; }
}
@media (max-width: 768px) {
  .tienda-hero-art { width: 100%; max-width: 100%; }
  .tienda-hero-art-img { opacity: .32; }
  .tienda-hero-overlay { background: linear-gradient(to right, rgba(4, 7, 15, .92) 0%, rgba(4, 7, 15, .75) 100%), linear-gradient(to bottom, var(--bg) 0%, transparent 20%, transparent 80%, var(--bg) 100%); }
  .tienda-card { padding: 10px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tienda-hero-art-img, .tienda-hero-art::after { animation: none; }
}