/* ==========================================================================
   DTI PROS · 3DTI (3dti.php)
   Secuencia del master: franja, hero, cinta, filas, estructura, partner,
   panel (lupa), aplicaciones de moda, merchandising, pasos, servicios y llamada.
   Hero, filas, capas, partner, lupa, pasos y llamada son componentes de header.css
   ========================================================================== */

/* Estructura: anatomía del relieve en 5 capas (header.js fija --p) */
.structure__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.structure__lead { max-width: 520px; margin: 18px 0 26px; color: var(--muted); }
.structure .structure__scene { --gap: calc(6px + var(--p) * 70px); width: min(300px, 64vw); aspect-ratio: 410 / 540; }
.structure .layers__layer { transform: translateZ(calc((var(--i) - 3) * var(--gap))); }
.structure .layers__layer--1 { --i: 1; }
.structure .structure__micro { --i: 2; background-color: #1A2440; background-image: radial-gradient(rgba(143, 176, 255, .35) 1px, transparent 1.4px); background-size: 9px 9px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.structure .structure__base { --i: 3; }
.structure .structure__color { --i: 4; }
.structure .structure__color img { object-fit: contain; }
.structure .structure__varnish { --i: 5; }
.layers__sw--micro { background: radial-gradient(#8FB0FF 1px, #1A2440 1.4px) 0 0 / 5px 5px; }

/* Aplicaciones de moda */
.apps__script { margin: 6px 0 0; font-size: clamp(30px, 3vw, 44px); line-height: 1.1; }
.apps-sec .apps { --ar: 3 / 4; }


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

/* Merchandising en 5 columnas (header.css lo reduce en tableta y móvil) */
.feats--5 { --cols: 5; }