/* Progressive motion only. styles.css remains the static design. */
.scene-brand, .chapter-depth { display: none; }
.motion-ready .hero-copy, .motion-ready .hero-figure { animation: none; }
.motion-ready #hero-title > [data-i18n="heroTitle"] { display: block; }
.motion-ready .feature-card { scroll-margin-block: 7rem 2rem; }
.scene-controls { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-top: .8rem; }
.scene-progress { appearance: none; display: block; width: min(220px, 30%); height: 3px; border: 0; border-radius: 3px; overflow: hidden; background: var(--line); color: var(--cyan); }
.scene-progress::-webkit-progress-bar { background: var(--line); }
.scene-progress::-webkit-progress-value { background: var(--cyan); }
.scene-progress::-moz-progress-bar { background: var(--cyan); }
.scene-skip { display: inline-flex; align-items: center; min-height: 44px; color: var(--cyan); font-size: .8rem; text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 1051px) and (prefers-reduced-motion: no-preference) {
  .motion-desktop #solucion.is-pinned { padding-block: 0; height: var(--scene-height); overflow-anchor: none; }
  .motion-desktop .is-pinned .feature-scene { position: sticky; top: var(--pin-top); height: var(--pin-height); display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; padding-block: 1.5rem; }
  .motion-desktop .is-pinned .section-heading { flex-shrink: 0; margin-bottom: 0; }
  .motion-desktop .is-pinned .feature-window { flex-shrink: 0; position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
  .motion-desktop .is-pinned .feature-grid { display: flex; width: max-content; gap: 1.5rem; transform: translate3d(var(--track-x, 0px), var(--track-y, 0px), 0); opacity: var(--track-opacity, 1); will-change: transform; }
  .motion-desktop .is-pinned .feature-card { flex: 0 0 var(--feature-width); width: var(--feature-width); }
  .motion-desktop .is-pinned .scene-controls { flex-shrink: 0; padding-top: 0; }
  .motion-desktop .is-pinned .scene-brand { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .75rem; z-index: 2; pointer-events: none; user-select: none; opacity: var(--brand-opacity, 1); transform: translate3d(0, var(--brand-y, 0px), 0) scale(var(--brand-scale, 1)); filter: blur(var(--brand-blur, 0px)); }
  .scene-brand > span:first-child { font-size: clamp(4rem, 9vw, 8rem); font-weight: 650; letter-spacing: -.055em; line-height: 1.05; }
  .scene-brand-note { font-size: .8rem; letter-spacing: .04em; color: var(--muted); }
  .scene-brand::before, .scene-brand::after { content: ""; position: absolute; width: 55px; height: 55px; border: 1px solid #59e2df55; border-radius: 6px; background: linear-gradient(130deg, #59e2df12, transparent); transform: perspective(400px) rotateX(30deg) rotateY(-25deg) rotateZ(-12deg); }
  .scene-brand::before { left: 13%; top: 16%; }
  .scene-brand::after { right: 12%; bottom: 12%; width: 40px; height: 40px; border-color: #c7b6ff44; transform: perspective(400px) rotateX(-20deg) rotateY(30deg) rotateZ(18deg); }
  .motion-desktop .chapter { position: relative; isolation: isolate; }
  .motion-desktop .chapter-depth { display: block; position: absolute; z-index: -1; inset: -3rem -1rem; overflow: hidden; overflow: clip; pointer-events: none; user-select: none; }
  .chapter-word { position: absolute; left: 1rem; top: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(5rem, 12vw, 12rem); letter-spacing: -.055em; line-height: 1; white-space: nowrap; color: var(--cyan); opacity: var(--word-opacity, .07); transform: translate3d(var(--word-x, 0px), var(--word-y, 0px), 0); }
  .chapter-control .chapter-word { left: auto; right: 1rem; }
  .chapter-analysis .chapter-word { color: #c7b6ff; }
  .chapter-halo { position: absolute; inset: 0 0 0 30%; transform: translate3d(var(--halo-x, 0px), var(--halo-y, 0px), 0); background: radial-gradient(ellipse at center, #59e2df16, transparent 68%); }
  .halo-mint { background: radial-gradient(ellipse at 60% 40%, #a7f3d018, transparent 65%); }
  .halo-lavender { background: radial-gradient(ellipse at 70% 40%, #c7b6ff1b, transparent 65%); }
  .motion-desktop [data-chapter-card] { opacity: var(--chapter-opacity, 1); transform: translate3d(0, var(--chapter-y, 0px), 0) scale(var(--chapter-scale, 1)); transform-origin: center; }
}

.motion-ready .language-switch button { transition: color .18s, background .18s; border-radius: 3px; }
.motion-ready .language-switch button[aria-pressed="true"] { background: #59e2df0a; }
.motion-ready .navigation.is-open { animation: menu-enter .22s ease-out; }
.motion-ready details[open] > p { animation: detail-enter .25s ease-out; }
.motion-ready summary::after { transition: transform .2s; }
.motion-ready details[open] summary::after { transform: rotate(180deg); }
.motion-ready .image-dialog[open] { animation: dialog-enter .22s ease-out; }
.motion-ready .image-dialog[open]::backdrop { animation: backdrop-enter .22s ease-out; }
@keyframes menu-enter { from { opacity: .65; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes detail-enter { from { opacity: .65; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dialog-enter { from { opacity: .6; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .motion-ready .feature-card, .motion-ready .button { transition: transform .2s ease-out, background .2s, border-color .2s; }
  .motion-ready .feature-card:hover, .motion-ready .feature-card:focus-within { transform: translateY(-4px); }
  .motion-ready .button:hover { transform: translateY(-3px); }
}
/* CSS safety net while the media-query listener restores measured layout. */
@media (prefers-reduced-motion: reduce), (max-width: 1050px) {
  #solucion.is-pinned { height: auto !important; }
  .scene-brand, .chapter-depth { display: none !important; }
  .motion-ready [data-chapter-card] { opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready *, .motion-ready *::before, .motion-ready *::after { animation: none !important; transition: none !important; }
  .scene-controls { display: none !important; }
}
@media print {
  #solucion.is-pinned { height: auto !important; padding-block: 2rem !important; }
  .feature-scene { position: static !important; height: auto !important; display: block !important; }
  .feature-window { overflow: visible !important; }
  .feature-grid { display: grid !important; width: auto !important; transform: none !important; opacity: 1 !important; }
  .feature-card { width: auto !important; }
  .scene-brand, .scene-controls, .chapter-depth { display: none !important; }
  [data-chapter-card] { transform: none !important; opacity: 1 !important; }
}