/* APD Web · Athos™ Mobit — estados que la maqueta calcula en JS y que aquí se fijan con CSS
   para que no haya saltos al cargar. Sin movimiento (o con ?captura) manda el estado estático. */
@media (prefers-reduced-motion: no-preference) {
  /* entrada de la foto del producto y de los rótulos */
  html.apd-js:not([data-apd-reduced-motion]) #inicio [data-apd-h="hero-img"] { clip-path: inset(100% 0% 0% 0%); transform: scale(1.08); transition: clip-path 1200ms var(--ease-enter) 150ms, transform 1600ms var(--ease-enter) 150ms; }
  html.apd-js:not([data-apd-reduced-motion]) #inicio [data-apd-h="hero-anno"] { opacity: 0; transition: opacity 600ms var(--ease-enter) 1300ms; }
  html.apd-js:not([data-apd-reduced-motion]) #inicio.is-in [data-apd-h="hero-img"] { clip-path: inset(0% 0% 0% 0%); transform: scale(1); }
  html.apd-js:not([data-apd-reduced-motion]) #inicio.is-in [data-apd-h="hero-anno"] { opacity: 1; }
}

/* Rótulos del hero: solo a partir de 1120 px (maqueta de Mobit: estado «wide» desde 1120) */
@media (max-width: 1119px) {
  #inicio [data-apd-h="hero-anno"] { display: none; }
}

/* Especificaciones: la maqueta usa el reparto por defecto (nombre flexible, valor a su ancho) y da a «Accesorios» un ancho fijo
   de 577 px. Con la columna estrecha (móvil, y de 960 a 1289 px, con la tabla al lado del texto) la tabla se salía de la pantalla
   o los nombres se montaban sobre los valores. En esos anchos, el mismo reparto que en el resto de productos. */
@media (max-width: 767px), (min-width: 960px) and (max-width: 1289px) {
  #especificaciones .apd-spec > * { grid-template-columns: minmax(9em, 2fr) minmax(0, 3fr); }
  #especificaciones .apd-spec__value { width: auto; height: auto; }
}