/* Autor: NALAW — https://nalaw.cl */
.deck-page { padding-block: 40px 0; display: grid; gap: 24px; }
.deck-head { display: grid; gap: 12px; padding-inline: max(var(--page), calc((100vw - var(--max)) / 2 + var(--page))); }
.deck-head p { max-width: 62ch; margin: 0; }
.deck-stage { background: var(--profundo); padding: 0 0 14px; display: grid; gap: 14px; }
.deck-frame { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 0; overflow: hidden; background: #000; touch-action: pan-y; }
.deck-frame img { width: 100%; height: 100%; display: block; object-fit: contain; }
.deck-arrow { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); cursor: pointer; background: rgba(22, 24, 29, .72); backdrop-filter: blur(6px); color: var(--hueso); display: grid; place-items: center; transition: background .15s, color .15s; }
.deck-arrow:hover { background: var(--naranjo); color: var(--profundo); }
.deck-arrow:focus-visible, .deck-btn:focus-visible { outline: 3px solid var(--naranjo); outline-offset: 2px; }
.deck-arrow[disabled] { opacity: .3; cursor: default; }
.deck-prev { left: max(12px, 1.5vw); } .deck-next { right: max(12px, 1.5vw); }
.deck-bar { padding-inline: var(--page); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: #b9bcc2; font: 600 13px var(--font-title); }
.deck-count { min-width: 4.5ch; font-variant-numeric: tabular-nums; }
.deck-dots { display: flex; gap: 4px; flex: 1 1 140px; }
.deck-dots button { flex: 1; height: 14px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.deck-dots button::after { content: ""; position: absolute; inset: 5px 0; border-radius: 2px; background: rgba(255, 255, 255, .2); }
.deck-dots button[aria-current="true"]::after { background: var(--naranjo); }
.deck-btn { display: inline-flex; align-items: center; border: 1px solid rgba(255, 255, 255, .25); border-radius: 99px; padding: 7px 14px; background: none; color: var(--hueso); font: inherit; text-decoration: none; cursor: pointer; }
.deck-btn.primary { background: var(--naranjo); border-color: var(--naranjo); color: var(--profundo); }
.deck-stage:fullscreen { align-content: center; padding: 0; }
.deck-stage:fullscreen .deck-frame { width: min(100%, calc((100vh - 70px) * 16 / 9)); margin-inline: auto; }
@media (max-width: 560px) { .deck-arrow { width: 38px; height: 38px; } .deck-fs { display: none; } }
@media (prefers-reduced-motion: no-preference) { .deck-frame img { animation: deck-in .25s ease; } @keyframes deck-in { from { opacity: .4; } to { opacity: 1; } } }