/* APD Web · Home — 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 de la página, igual que en la maqueta. */

/* Hero: el vídeo sube bajo la cabecera (el script lo ajusta a la altura real) */
#apd { margin-top: calc(-1px - var(--header-height)); }
@media (max-width: 1100px) { #apd { margin-top: calc(-1px - var(--header-height-compact)); } }
/* el texto del hero solo cabe con pantallas de 720 px de alto o más */
@media (max-height: 719px) { #apd [data-apd-h="hero-roomy"] { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* hero alto: el encuadre se hace mientras se recorre */
  html:not([data-apd-reduced-motion]) #apd { height: max(170vh, 816px); }
  /* marquesina animada (sin movimiento se desplaza a mano) */
  html:not([data-apd-reduced-motion]) #clientes [data-apd-h="marquee"] { overflow-x: hidden; }
}

/* Circuito del medicamento: historia fijada en escritorio */
@media (min-width: 1025px) and (min-height: 520px) and (prefers-reduced-motion: no-preference) {
  html:not([data-apd-reduced-motion]) #soluciones [data-apd-h="story"] { height: 400vh; }
  html:not([data-apd-reduced-motion]) #soluciones [data-apd-h="story-sticky"] { min-height: 100vh; padding: calc(var(--header-height-compact) + var(--space-32)) 0 var(--space-32); }
  html:not([data-apd-reduced-motion]) #soluciones [data-apd-h="story-frame"] { height: min(calc(100vh - var(--header-height-compact) - 64px), 840px); }
}
@media (min-width: 1025px) and (min-height: 520px) and (max-height: 759px) and (prefers-reduced-motion: no-preference) {
  html:not([data-apd-reduced-motion]) #soluciones [data-apd-h="story-sticky"] { padding: calc(var(--header-height-compact) + 16px) 0 16px; }
  html:not([data-apd-reduced-motion]) #soluciones [data-apd-h="story-frame"] { height: calc(100vh - var(--header-height-compact) - 32px); }
  html:not([data-apd-reduced-motion]) #soluciones [data-apd-h="story-roomy"] { display: none; }
}

/* Reglas propias de la maqueta de la Home (bloque <style> de la página) */
#athos .apd-card--product { height: 100%; box-sizing: border-box; }
#apd .apd-btn { transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
#apd .apd-btn--secondary { color: var(--white); border-color: #ffffffb3; }
#apd .apd-btn--secondary:hover { color: var(--onyx); background: var(--white); border-color: var(--white); }
#apd .apd-btn--primary:hover { background: var(--baltic-blue); color: var(--white); }