/* ==========================================================================
   DTI Barcelona · Tienda y personalizador (tienda-dti.php, tienda-3d.php, tienda-uv.php)
   Estructura del master Innuro (hero con foto fundida + tarjeta del personalizador
   [dtf-store] + tira de servicios) con el diseño de DTI Barcelona.
   Base y cabecera en header.css · Rótulos y migas en componentes.css
   ========================================================================== */

/* ==========================================================================
   HERO CON FOTO FUNDIDA A LA DERECHA
   ========================================================================== */
.tienda-hero { position: relative; overflow: hidden; background: var(--bg); padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); border-bottom: 1px solid var(--line); }
.tienda-hero-art { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; max-width: 900px; pointer-events: none; z-index: 1; overflow: hidden; }
.tienda-hero-art-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .75; transform: scale(1.02); }
/* Fusión: negro sólido a la izquierda, bordes superior e inferior fundidos y brillo amarillo suave */
.tienda-hero-overlay { position: absolute; inset: 0; background:
  linear-gradient(to right, var(--bg) 0%, rgba(14, 14, 14, .96) 12%, rgba(14, 14, 14, .78) 30%, rgba(14, 14, 14, .35) 58%, rgba(14, 14, 14, .1) 82%, rgba(14, 14, 14, .3) 100%),
  linear-gradient(to bottom, var(--bg) 0%, transparent 22%, transparent 78%, var(--bg) 100%),
  radial-gradient(ellipse 65% 70% at 75% 50%, rgba(255, 194, 0, .12) 0%, transparent 70%); }
.tienda-hero-wrap { position: relative; z-index: 2; }
.tienda-hero-content { max-width: 680px; }
.tienda-hero__title { font-size: clamp(52px, 7.4vw, 108px); text-shadow: 0 2px 24px rgba(0, 0, 0, .5); }
.tienda-hero p { color: var(--muted); max-width: 580px; margin: 22px 0 0; font-size: 18px; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }

.tienda-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.tienda-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .16); background: rgba(14, 14, 14, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: var(--cream); font-size: 13px; font-weight: 700; letter-spacing: .04em; transition: border-color .2s ease; }
.tienda-badge:hover { border-color: var(--yellow); }
.tienda-badge svg { width: 16px; height: 16px; fill: var(--yellow); flex: none; }

/* ==========================================================================
   PERSONALIZADOR (shortcode [dtf-store] del plugin)
   ========================================================================== */
.tienda-body { background: var(--sand); color: var(--ink); padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 100px); }
.tienda-card { background: #fff; border-radius: 26px; padding: clamp(16px, 2.4vw, 28px); min-height: 480px; box-shadow: 0 30px 70px rgba(60, 45, 20, .14); color: var(--ink); }
.tienda-card a { color: inherit; }
.tienda-card a:hover { color: var(--gold-ink); }
.tienda-card__fallback { margin: 0; padding: 40px 0; text-align: center; color: #6B6255; font-style: italic; }

/* ==========================================================================
   TIRA DE SERVICIOS DE CONFIANZA (amarilla, antes del pie)
   ========================================================================== */
.service { background: var(--yellow); color: var(--bg); }
.service .wrap { display: grid; grid-template-columns: auto auto repeat(4, minmax(0, 1fr)); align-items: center; padding-block: 20px; }
.service .cell { display: flex; align-items: center; gap: 12px; padding: 6px 18px; border-left: 1.5px solid rgba(14, 14, 14, .22); min-width: 0; color: var(--bg); font: 700 14px/1.2 var(--body); letter-spacing: .04em; text-transform: uppercase; }
.service .cell:first-child { border: 0; padding-left: 0; white-space: nowrap; font: 400 clamp(20px, 2vw, 26px)/1.05 var(--display); letter-spacing: .01em; }
.service a.cell { transition: opacity .2s ease; }
.service a.cell:hover { color: var(--bg); opacity: .7; }
.service .cell svg { flex: none; width: 40px; height: 40px; fill: none; stroke: var(--bg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.service .cell:first-child svg { width: 64px; height: 44px; }
.service .pill { background: var(--bg); border-radius: 999px; padding: 12px 24px; margin-inline: 18px; }
.service .pill img { display: block; width: 140px; height: auto; }

/* ==========================================================================
   MÓVIL
   ========================================================================== */
@media (max-width: 1260px) {
  .service .wrap { grid-template-columns: 1fr 1fr; gap: 14px 0; }
  .service .cell:first-child { grid-column: 1 / -1; }
  .service .pill { display: none; }
  .service .cell:nth-child(3), .service .cell:nth-child(5) { border-left: 0; padding-left: 0; }
}
@media (max-width: 992px) {
  .tienda-hero-art { width: 70%; }
  .tienda-hero-art-img { opacity: .55; }
}
@media (max-width: 768px) {
  .tienda-hero-art { width: 100%; max-width: 100%; }
  .tienda-hero-art-img { opacity: .3; }
  .tienda-hero-overlay { background: linear-gradient(to right, rgba(14, 14, 14, .92) 0%, rgba(14, 14, 14, .75) 100%), linear-gradient(to bottom, var(--bg) 0%, transparent 20%, transparent 80%, var(--bg) 100%); }
  .tienda-card { padding: 12px; border-radius: 16px; }
}
@media (max-width: 560px) {
  .service .wrap { grid-template-columns: 1fr; }
  .service .cell { border-left: 0; padding: 6px 0; }
  .service .cell svg { width: 32px; height: 32px; }
}