/* ==========================================================================
   DTI PROS · UV DTF (uv-dtf.php)
   Secuencia del master: franja, hero, cinta, ventajas, en detalle (película
   que se despega), fácil de colocar, partner, aplicaciones, pasos, servicios y llamada.
   Hero, ventajas, partner, aplicaciones, pasos y llamada son componentes de header.css
   ========================================================================== */

/* En detalle: película transportadora que se despega (uv-dtf.js fija --peel de 0 a 1) */
.real__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.real__text > p { margin: 18px 0 24px; max-width: 520px; color: var(--muted); }
.peel { --peel: 0; position: relative; overflow: hidden; aspect-ratio: 485 / 469; border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9), 0 0 60px -20px var(--glow); touch-action: pan-y; user-select: none; }
.peel__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* La película cubre la parte aún no despegada: velo blanquecino con reflejos */
.peel__film { position: absolute; inset: 0; left: calc(var(--peel) * 100%); background: linear-gradient(125deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .12) 30%, rgba(255, 255, 255, .34) 46%, rgba(255, 255, 255, .08) 62%, rgba(255, 255, 255, .3) 100%); backdrop-filter: blur(3px) saturate(.7); -webkit-backdrop-filter: blur(3px) saturate(.7); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .8); pointer-events: none; }
/* Borde levantado de la película (pliegue) */
.peel__edge { position: absolute; top: 0; bottom: 0; left: calc(var(--peel) * 100%); width: 46px; transform: translateX(-100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 70%, rgba(255, 255, 255, .9)); filter: drop-shadow(-10px 0 14px rgba(0, 0, 0, .45)); opacity: calc(min(1, var(--peel) * 12)); pointer-events: none; }
.peel__handle { position: absolute; top: 50%; left: calc(var(--peel) * 100%); z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; border: 2px solid #fff; border-radius: 50%; background: var(--blue); color: #fff; box-shadow: 0 0 0 6px rgba(31, 91, 255, .25), 0 10px 30px rgba(0, 0, 0, .5); cursor: ew-resize; transition: transform .2s; }
.peel__handle:hover, .peel.is-dragging .peel__handle { transform: scale(1.1); }
.peel__handle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.peel__label { position: absolute; top: 16px; padding: 7px 12px; border-radius: 999px; background: rgba(4, 7, 15, .75); font: 700 13px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; transition: opacity .3s; }
.peel__label--a { right: 16px; opacity: calc(1 - var(--peel)); }
.peel__label--b { left: 16px; color: var(--blue-3); opacity: var(--peel); }

/* Fácil de colocar */
.howto__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: none; }
.howto__list li { position: relative; display: grid; justify-items: center; gap: 10px; padding: 34px 24px 28px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); text-align: center; overflow: hidden; }
.howto__n { position: absolute; left: 18px; top: 10px; font-size: 64px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(76, 132, 255, .5); }
.howto__list svg { width: 60px; height: 60px; fill: none; stroke: var(--blue-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 12px var(--glow)); }
.howto__list b { font: 700 20px/1.2 var(--label); letter-spacing: .08em; text-transform: uppercase; }
.howto__list span:not(.howto__n) { color: var(--muted); font-size: 15px; }

/* Aplicaciones */
.limits__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 460px; }
.limits__chips li { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(31, 91, 255, .07); font: 700 14px/1 var(--label); letter-spacing: .1em; text-transform: uppercase; }


@media (max-width: 900px) {
  .real__grid { grid-template-columns: 1fr; }
  .howto__list { grid-template-columns: 1fr; }
}