/* ==========================================================================
   DTI Barcelona · Página UV DTF (uv-dtf.php)
   Estética "UV DTF Signature": crema editorial, negro y dorado, Playfair.
   Base y cabecera en header.css · Secciones compartidas en componentes.css
   ========================================================================== */

/* ==========================================================================
   HERO
   ========================================================================== */
.uvhero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); background: radial-gradient(110% 90% at 80% 15%, #FFFBF4 0%, var(--sand) 55%, #E9DDCB 100%); }
.uvhero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.uvhero__title { font-size: clamp(64px, 8.6vw, 132px); color: var(--ink); isolation: isolate; }
.uvhero__title .line { display: block; overflow: hidden; padding: .12em 0 .04em; margin-top: -.12em; }
.uvhero__title .line > span { display: inline-block; }
.uvhero__claim { font-size: .48em; line-height: 1.05; }
.uvhero__lead { margin: 22px 0 28px; font-size: 17px; max-width: 500px; }
.uvfeat { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(20, 20, 20, .14); }
.uvfeat li { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(20, 20, 20, .14); }
.uvfeat svg { flex: none; width: 48px; height: 48px; padding: 11px; border-radius: 50%; border: 1.5px solid var(--ink); fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: background .3s ease, stroke .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1); }
.uvfeat li:hover svg { background: var(--ink); stroke: var(--yellow); transform: rotate(-8deg); }
.uvfeat strong { display: block; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; }
.uvfeat span { font-size: 14px; color: #5E5548; }
.uvhero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.uvhero__media { margin: 0; position: relative; }
.uvhero__photo { border-radius: 28px; overflow: hidden; box-shadow: 0 50px 90px rgba(60, 45, 20, .3); aspect-ratio: 4 / 4.6; background: #111; }
.uvhero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.04); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.uvhero__media:hover .uvhero__photo img { transform: scale(1.08); }
.uvhero__sign { display: grid; justify-items: center; gap: 6px; margin-top: 22px; text-align: center; }
.uvhero__sign-title { font-family: var(--serif); font-size: clamp(28px, 3.2vw, 46px); line-height: 1; color: var(--ink); letter-spacing: .02em; }
.uvhero__sign-sub { display: flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: .4em; text-transform: uppercase; color: #3E3830; }
.uvhero__sign-sub::before, .uvhero__sign-sub::after { content: ""; width: 48px; height: 2px; background: var(--yellow); }
@media (max-width: 960px) {
  .uvhero__grid { grid-template-columns: 1fr; }
  .uvhero__media { max-width: 520px; width: 100%; margin-inline: auto; }
}

/* ==========================================================================
   TECNOLOGÍA UV DTF (banda oscura)
   ========================================================================== */
.uvtech { background: var(--bg); padding: clamp(64px, 8vw, 112px) 0; }
.uvtech__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.uvtech__title { font-size: clamp(42px, 5.4vw, 76px); }
.uvtech__intro p { color: var(--muted); margin: 0; max-width: 480px; }
.uvtech__intro strong { color: var(--cream); }
.uvtech__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.uvtech__list li { display: grid; justify-items: center; gap: 16px; padding: 26px 10px; text-align: center; border-left: 1px solid var(--line-2); }
.uvtech__list li:first-child { border-left: 0; }
.uvtech__list svg { width: 50px; height: 50px; fill: none; stroke: var(--yellow); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.uvtech__list li:hover svg { transform: translateY(-6px) scale(1.08); }
.uvtech__list .d { font-size: 22px; line-height: 1; }
@media (max-width: 960px) { .uvtech__grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .uvtech__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uvtech__list li:nth-child(3) { border-left: 0; }
  .uvtech__list li:nth-child(n+3) { border-top: 1px solid var(--line-2); }
}

/* ==========================================================================
   DEMO: ELIGE SUPERFICIE Y RETIRA EL FILM (uv-dtf.js)
   ========================================================================== */
.peel { background: radial-gradient(70% 70% at 70% 50%, #1c1a16 0%, var(--bg) 70%); padding: clamp(72px, 9vw, 128px) 0; border-top: 1px solid var(--line-2); }
.peel__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.peel__title { font-size: clamp(42px, 5.2vw, 76px); }
.peel__text > p { color: var(--muted); margin: 22px 0 28px; max-width: 460px; }
.surfaces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.surfaces__btn { border: 1.5px solid var(--line-2); background: var(--bg-2); color: var(--cream); border-radius: 999px; padding: 11px 20px; font: 700 14px/1 var(--body); cursor: pointer; transition: border-color .25s ease, background .25s ease, color .25s ease; }
.surfaces__btn:hover { border-color: var(--yellow); }
.surfaces__btn[aria-checked="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--bg); }
.peel__range { display: grid; gap: 10px; max-width: 420px; }
.peel__range span { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); font-weight: 700; }
.peel__range input { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--yellow) calc(var(--v, 0) * 1%), #333 0); outline-offset: 6px; cursor: pointer; }
.peel__range input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--cream); border: 4px solid var(--yellow); box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.peel__range input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--cream); border: 4px solid var(--yellow); }
.peel__help { font-size: 13px; color: var(--muted-2); margin: 10px 0 0; }

.peel__stage { display: grid; gap: 14px; }
.device { --peel: 0; position: relative; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 90px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .08); touch-action: none; cursor: grab; transition: background .5s ease; }
.device:active { cursor: grabbing; }
.device::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .28) 0%, transparent 32%, transparent 62%, rgba(255, 255, 255, .12) 78%, transparent 100%); }
.device__design { position: absolute; inset: 0; display: grid; place-items: center; }
.device__logo { width: 58%; height: auto; transition: opacity .4s ease; }
.device__logo--light { position: absolute; opacity: 0; }
.device[data-surface="metal"] .device__logo--dark { opacity: 0; }
.device[data-surface="metal"] .device__logo--light { opacity: 1; }
.device[data-surface="cristal"] { background: radial-gradient(120% 90% at 20% 10%, #f4fbff 0%, #cfe2ea 45%, #9fbcc8 100%); }
.device[data-surface="cristal"] .device__logo { mix-blend-mode: multiply; }
.device[data-surface="metal"] { background: linear-gradient(115deg, rgba(255, 255, 255, .18), transparent 40%, rgba(255, 255, 255, .1) 70%, transparent), repeating-linear-gradient(90deg, #3a3d42 0 2px, #45494f 2px 3px, #34373c 3px 5px); }
.device[data-surface="kraft"] { background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .15), transparent 60%), repeating-linear-gradient(35deg, rgba(90, 60, 30, .08) 0 2px, transparent 2px 5px), #c49a68; }
.device[data-surface="kraft"] .device__logo { mix-blend-mode: multiply; }
.device[data-surface="plastico"] { background: radial-gradient(120% 100% at 25% 15%, #ffffff 0%, #f2f2f2 50%, #dcdcdc 100%); }

.device__film { position: absolute; inset: 9%; border-radius: 12px; background: linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .28) 38%, rgba(255, 255, 255, .45) 55%, rgba(255, 255, 255, .22) 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); backdrop-filter: blur(2.6px) saturate(.85); -webkit-backdrop-filter: blur(2.6px) saturate(.85); pointer-events: none; }
.device__curl { position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(225deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .22) 30%, rgba(255, 255, 255, .08) 60%, rgba(255, 255, 255, .35) 100%); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); filter: drop-shadow(-8px 12px 14px rgba(0, 0, 0, .35)); pointer-events: none; }
.device__done { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; padding: 8px 16px; border-radius: 999px; background: var(--yellow); color: var(--bg); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.device.is-done .device__done { opacity: 1; transform: none; }
.peel__caption { margin: 0; font-size: 12px; color: var(--muted-3); text-align: center; }
@media (max-width: 960px) { .peel__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   CÓMO SE APLICA
   ========================================================================== */
.uvsteps { padding: clamp(72px, 9vw, 128px) 0; }
.uvsteps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: s; }
.uvsteps__list li { position: relative; display: grid; gap: 10px; align-content: start; padding: 30px 26px 32px; border-radius: 22px; background: #fff; box-shadow: 0 20px 50px rgba(60, 45, 20, .1); overflow: hidden; transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease; }
.uvsteps__list li:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(60, 45, 20, .18); }
.uvsteps__list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.uvsteps__list li:hover::after { transform: scaleX(1); }
.uvsteps__n { font-size: 54px; line-height: 1; color: var(--gold); }
.uvsteps__list strong { font-size: 18px; }
.uvsteps__list span:last-child { color: #4A433A; font-size: 15px; }
@media (max-width: 760px) { .uvsteps__list { grid-template-columns: 1fr; } }

/* ==========================================================================
   MACRO UV DTF
   ========================================================================== */
.uvmacro { background: var(--bg); padding: clamp(72px, 9vw, 128px) 0; }
.uvmacro__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.uvmacro__media { position: relative; }
.uvmacro__media .ph { aspect-ratio: 562 / 480; border-radius: 24px; }
.uvmacro__badge { position: absolute; top: 18px; left: 18px; background: var(--yellow); color: var(--bg); font-family: var(--display); font-size: 18px; letter-spacing: .06em; padding: 8px 16px; border-radius: 999px; }
.uvmacro__text > p { color: var(--muted); margin: 22px 0 26px; max-width: 480px; }
.uvmacro .checks.checks--dark svg { stroke: var(--yellow); }
@media (max-width: 860px) { .uvmacro__grid { grid-template-columns: 1fr; } }

/* Objetos: 6 tarjetas */
.items__grid.items__grid--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 960px) { .items__grid.items__grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .items__grid.items__grid--six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   UV DTF STAMPING
   ========================================================================== */
.stamp { background: linear-gradient(180deg, var(--bg-2), var(--bg)); padding: clamp(72px, 9vw, 120px) 0; border-top: 1px solid var(--line); }
.stamp__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.stamp__media { margin: 0; }
.stamp__media .ph { aspect-ratio: 4 / 3; border-radius: 24px; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.stamp__text > p { color: var(--muted); margin: 22px 0 28px; max-width: 460px; }
.stamp__gold { background: linear-gradient(100deg, #8a6400 0%, #FFD54D 22%, #fff3c4 30%, #FFC200 42%, #8a6400 60%, #FFD54D 80%, #b88700 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: goldSweep 5s linear infinite; }
@keyframes goldSweep { to { background-position: -220% 0; } }
@media (max-width: 860px) { .stamp__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   ENTRADA DEL HERO (uv-dtf.js añade .is-ready)
   ========================================================================== */
.js .uvhero__title .line > span { transform: translateY(105%); transition: transform 1.1s cubic-bezier(.19, 1, .22, 1); }
.js .uvhero__title .line:nth-child(2) > span { transition-delay: .1s; }
.js .uvhero__title .line:nth-child(3) > span { transition-delay: .2s; }
.js .uvhero.is-ready .uvhero__title .line > span { transform: none; }
.js .uvhero .mark::after { transform: scaleX(0); transition: transform .9s cubic-bezier(.2, .7, .2, 1) .75s; }
.js .uvhero.is-ready .mark::after { transform: scaleX(1); }
.js .uvhero__eyebrow, .js .uvhero__lead, .js .uvhero__ctas, .js .uvhero .crumbs { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
.js .uvhero.is-ready .uvhero__eyebrow, .js .uvhero.is-ready .crumbs { opacity: 1; transform: none; }
.js .uvhero.is-ready .uvhero__lead { opacity: 1; transform: none; transition-delay: .35s; }
.js .uvhero.is-ready .uvhero__ctas { opacity: 1; transform: none; transition-delay: .5s; }
.js .uvhero__photo { clip-path: inset(100% 0 0 0 round 28px); transition: clip-path 1.3s cubic-bezier(.77, 0, .175, 1) .15s; }
.js .uvhero.is-ready .uvhero__photo { clip-path: inset(0 0 0 0 round 28px); }
.js .uvhero__sign { opacity: 0; transform: translateY(16px); transition: opacity .9s ease 1s, transform .9s ease 1s; }
.js .uvhero.is-ready .uvhero__sign { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .uvhero__title .line > span, .js .uvhero .mark::after, .js .uvhero__eyebrow, .js .uvhero__lead, .js .uvhero__ctas, .js .uvhero .crumbs, .js .uvhero__sign { opacity: 1; transform: none; transition: none; }
  .js .uvhero__photo { clip-path: none; transition: none; }
  .stamp__gold { animation: none; }
}