/* ==========================================================================
   DTI PROS · UV DTF Stamping (uv-dtf-stamping.php)
   Secuencia del master: franja, hero, cinta, filas, ventajas (comparativa),
   aplicaciones premium, partner, panel (lupa), pasos y servicios.
   Tema dorado (.is-gold). Componentes compartidos en header.css
   ========================================================================== */

/* Selector oro / plata del hero (uv-dtf-stamping.js cambia data-finish) */
.finish { display: inline-flex; gap: 6px; margin: 0 0 28px; padding: 5px; border-radius: 12px; border: 1px solid rgba(217, 164, 74, .35); background: rgba(4, 7, 15, .6); }
.finish__btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 700 15px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s; }
.finish__btn[aria-checked="true"] { color: #160F02; }
.finish__btn--oro[aria-checked="true"] { background: linear-gradient(135deg, #B8862E, var(--gold-2)); }
.finish__btn--plata[aria-checked="true"] { background: linear-gradient(135deg, #8A93A6, #F1F4FA); }
.finish__sw { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.finish__btn--oro .finish__sw { background: radial-gradient(circle at 35% 30%, #FFF1C9, #B8862E 70%); }
.finish__btn--plata .finish__sw { background: radial-gradient(circle at 35% 30%, #fff, #8A93A6 70%); }

/* Muestra de foil flotante sobre la foto del hero */
.st .st__swatch { position: absolute; z-index: 3; left: -28px; bottom: 10%; width: 56%; overflow: hidden; aspect-ratio: 2 / 1; border-radius: 14px; border: 1px solid rgba(242, 200, 120, .5); background: #05060B; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); animation: floaty 6s ease-in-out infinite; transition: border-color .4s; }
.st__swatch-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.st__swatch-img--plata { opacity: 0; transform: scale(1.08); }
.st__swatch figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; font: 700 12px/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); text-shadow: 0 1px 6px #000; }
.st__swatch-plata { display: none; color: #E9EEF7; }
.st[data-finish="plata"] .st__swatch { border-color: rgba(233, 238, 247, .6); }
.st[data-finish="plata"] .st__swatch-img--oro { opacity: 0; transform: scale(1.08); }
.st[data-finish="plata"] .st__swatch-img--plata { opacity: 1; transform: none; }
.st[data-finish="plata"] .st__swatch-oro { display: none; }
.st[data-finish="plata"] .st__swatch-plata { display: inline; }
.st[data-finish="plata"] .gold-text { background-image: linear-gradient(100deg, #8A93A6 0%, #E9EEF7 30%, #fff 45%, #B9C1D1 60%, #8A93A6 100%); }
.st[data-finish="plata"] .thero__script { color: #E9EEF7; }

/* Cinta dorada */
.ribbon.ribbon--gold { background: linear-gradient(90deg, #3A2A08, #B8862E 50%, #3A2A08); border-color: rgba(242, 200, 120, .6); box-shadow: 0 20px 60px -20px rgba(217, 164, 74, .45); }
.ribbon.ribbon--gold span { color: #FFF6DE; }
.ribbon.ribbon--gold i { color: #fff; }

/* Comparativa */
.diff__table { max-width: 980px; margin: 0 auto; border-radius: 18px; border: 1px solid rgba(217, 164, 74, .3); background: var(--panel); overflow: hidden; }
.diff__row { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); align-items: center; border-top: 1px solid var(--line-2); }
.diff__row:first-child { border-top: 0; }
.diff__row > span { padding: 16px 18px; text-align: center; }
.diff__row > span:first-child { text-align: left; font-weight: 600; }
.diff__row--head > span { font: 700 15px/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.diff__st { background: rgba(217, 164, 74, .08); }
.diff__row--head .diff__st { color: var(--gold-2); }
.diff .yes { color: var(--gold-2); font-size: 20px; font-weight: 700; }
.diff .no { color: var(--muted-2); }

/* Tira de servicios dorada */
.service.service--gold { background: linear-gradient(100deg, #2A1E07 0%, #8C6420 45%, #C99A42 70%, #2A1E07 100%); border-color: rgba(242, 200, 120, .5); }

@media (max-width: 640px) {
  .diff__row { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, .7fr)); font-size: 14px; }
  .diff__row > span { padding: 12px 8px; }
  .diff__row--head > span { font-size: 12px; letter-spacing: .02em; overflow-wrap: anywhere; hyphens: auto; }
  .st .st__swatch { left: 8px; width: 62%; }
}
@media (prefers-reduced-motion: reduce) { .st .st__swatch { animation: none; } }