/* * IMPORTANTE: ningún ancestro directo de .sd-deck-stage (el elemento con * position: sticky) debe tener overflow-x/overflow-y distinto de "visible". * Fijar overflow-x:hidden en un contenedor "envolvente" (incluso solo en * el eje X) hace que el navegador convierta automáticamente overflow-y en * "auto" (lo exige la propia especificación CSS), lo que crea un nuevo * contexto de scroll y rompe el "sticky" contra la ventana. Si en el * futuro se necesita evitar scroll horizontal, hazlo en , nunca en * un ancestro de .sd-deck-stage. (Lección aprendida depurando el plugin * anterior de Helazos: el propio tema o un overflow "de seguridad" mal * puesto rompía el sticky). */ .sd-deck-story { position: relative; height: calc(var(--sd-slide-count, 1) * 100vh); margin: 0; padding: 0; } .sd-deck-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; } .sd-global-layer { position: absolute; inset: 0; z-index: 2; transform: rotate(var(--sd-layer-rotation, 0deg)); transform-origin: 50% 50%; transition: transform 900ms cubic-bezier(.22, .8, .22, 1); } .sd-deck-panels { position: relative; z-index: 1; width: 100%; height: 100%; } .sd-slide { position: absolute; inset: 0; overflow: auto; opacity: 0; visibility: hidden; transition: opacity 420ms ease, transform 650ms cubic-bezier(.22, .8, .22, 1), visibility 0s 650ms; } /* Dirección del movimiento de entrada (solo tiene efecto visible si el tipo de transición es "slide"; con "fade" se anula más abajo). "down" (por defecto) reproduce el comportamiento original: la diapositiva entra viniendo de abajo hacia arriba. */ .sd-deck[data-panel-direction="down"] .sd-slide { transform: translateY(30px); } .sd-deck[data-panel-direction="up"] .sd-slide { transform: translateY(-30px); } .sd-deck[data-panel-direction="left"] .sd-slide { transform: translateX(-30px); } .sd-deck[data-panel-direction="right"] .sd-slide { transform: translateX(30px); } /* Tipo "fade": fundido puro, sin desplazamiento, sea cual sea la dirección elegida (esta regla va después a propósito, para que gane). */ .sd-deck[data-panel-transition="fade"] .sd-slide { transform: none; } /* La diapositiva activa siempre debe quedar en su sitio (transform: none), pisando cualquiera de las reglas de dirección anteriores. Por eso se escribe con la misma especificidad (.sd-deck + .sd-slide + .is-active) y se coloca después de todas ellas: en caso de empate de especificidad, gana la regla que aparece más abajo en la hoja de estilos. */ .sd-deck .sd-slide.is-active { opacity: 1; visibility: visible; transform: translate(0, 0); transition-delay: 150ms, 150ms, 0s; } .sd-deck-dots { position: absolute; left: 24px; bottom: 24px; z-index: 5; display: flex; gap: 10px; } .sd-deck-dots button { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; background: currentColor; color: #333; opacity: .35; cursor: pointer; transition: width 220ms ease, opacity 220ms ease, border-radius 220ms ease; } .sd-deck-dots button.is-active { width: 32px; border-radius: 999px; opacity: 1; } .sd-slide-counter { font-variant-numeric: tabular-nums; } /* --- Imagen de diapositiva --- */ .sd-image-rail { position: absolute; z-index: 3; overflow: hidden; display: flex; align-items: center; justify-content: center; pointer-events: none; } .sd-image-track { position: relative; display: flex; gap: 16px; pointer-events: auto; touch-action: none; cursor: grab; user-select: none; } .sd-image-track.is-dragging { cursor: grabbing; } .sd-image-item { border-radius: 12px; overflow: hidden; pointer-events: auto; cursor: pointer; } .sd-image-item.is-active { cursor: default; } .sd-image-item img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-drag: none; pointer-events: none; } /* Posición en escritorio (todas explícitas para no dejar valores del modo anterior "colgando" al cambiar de opción). El tamaño de la franja se controla con --sd-rail-size-desktop, y el margen respecto al borde al que está pegada con --sd-offset-desktop (ambas definidas inline por PHP). */ .sd-image-rail[data-position-desktop="right"] { top: 0; right: var(--sd-offset-desktop, 0px); bottom: 0; left: auto; width: var(--sd-rail-size-desktop, 32%); height: auto; } .sd-image-rail[data-position-desktop="left"] { top: 0; left: var(--sd-offset-desktop, 0px); bottom: 0; right: auto; width: var(--sd-rail-size-desktop, 32%); height: auto; } .sd-image-rail[data-position-desktop="top"] { top: var(--sd-offset-desktop, 0px); left: 0; right: 0; bottom: auto; height: var(--sd-rail-size-desktop, 32%); width: auto; } .sd-image-rail[data-position-desktop="bottom"] { bottom: var(--sd-offset-desktop, 0px); left: 0; right: 0; top: auto; height: var(--sd-rail-size-desktop, 32%); width: auto; } .sd-image-rail[data-position-desktop="none"] { display: none; } /* Eje de movimiento en escritorio: vertical (arriba/abajo) apila en columna, horizontal (izquierda/derecha) apila en fila. El tamaño de cada imagen se controla con --sd-item-size-desktop (definida inline por PHP). */ .sd-image-rail[data-axis-desktop="vertical"] .sd-image-track { flex-direction: column; height: 100%; } .sd-image-rail[data-axis-desktop="vertical"] .sd-image-item { width: 100%; flex: 0 0 var(--sd-item-size-desktop, 64%); } .sd-image-rail[data-axis-desktop="horizontal"] .sd-image-track { flex-direction: row; width: 100%; } .sd-image-rail[data-axis-desktop="horizontal"] .sd-image-item { height: 100%; flex: 0 0 var(--sd-item-size-desktop, 64%); } /* Transición "deslizar": la tira entera se traslada (JS calcula el offset). */ .sd-image-rail[data-transition="slide"] .sd-image-track { transition: transform 700ms cubic-bezier(.22, .8, .22, 1); } /* Transición "difuminado": todas las imágenes apiladas en el mismo sitio, solo cambia la opacidad (como los paneles de diapositiva). */ .sd-image-rail[data-transition="fade"] .sd-image-track { display: block; width: 100%; height: 100%; } .sd-image-rail[data-transition="fade"] .sd-image-item { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease; } .sd-image-rail[data-transition="fade"] .sd-image-item.is-active { opacity: 1; } @media (max-width: 767px) { .sd-image-rail[data-position-mobile="right"] { display: flex; top: 0; right: var(--sd-offset-mobile, 0px); bottom: 0; left: auto; width: var(--sd-rail-size-mobile, 32%); height: auto; max-width: calc(100% - (2 * var(--sd-offset-mobile, 0px))); } .sd-image-rail[data-position-mobile="left"] { display: flex; top: 0; left: var(--sd-offset-mobile, 0px); bottom: 0; right: auto; width: var(--sd-rail-size-mobile, 32%); height: auto; max-width: calc(100% - (2 * var(--sd-offset-mobile, 0px))); } .sd-image-rail[data-position-mobile="top"] { display: flex; top: var(--sd-offset-mobile, 0px); left: 0; right: 0; bottom: auto; height: var(--sd-rail-size-mobile, 32%); width: auto; max-height: calc(100% - (2 * var(--sd-offset-mobile, 0px))); } .sd-image-rail[data-position-mobile="bottom"] { display: flex; bottom: var(--sd-offset-mobile, 0px); left: 0; right: 0; top: auto; height: var(--sd-rail-size-mobile, 32%); width: auto; max-height: calc(100% - (2 * var(--sd-offset-mobile, 0px))); } .sd-image-rail[data-position-mobile="none"] { display: none; } /* Eje de movimiento en móvil: puede ser distinto al de escritorio, con su propio tamaño de imagen (--sd-item-size-mobile). */ .sd-image-rail[data-axis-mobile="vertical"] .sd-image-track { flex-direction: column; height: 100%; width: auto; } .sd-image-rail[data-axis-mobile="vertical"] .sd-image-item { width: 100%; height: auto; flex: 0 0 var(--sd-item-size-mobile, 64%); } .sd-image-rail[data-axis-mobile="horizontal"] .sd-image-track { flex-direction: row; width: 100%; height: auto; } .sd-image-rail[data-axis-mobile="horizontal"] .sd-image-item { height: 100%; width: auto; flex: 0 0 var(--sd-item-size-mobile, 64%); } } .sd-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sd-deck-dots button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .sd-slide a:focus-visible, .sd-slide button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } @media (max-width: 767px) { .sd-deck-story { height: calc(var(--sd-slide-count, 1) * 100svh); } .sd-deck-stage { height: 100svh; } } @media (prefers-reduced-motion: reduce) { .sd-deck *, .sd-deck *::before, .sd-deck *::after { transition-duration: 1ms !important; } } .sd-admin-notice { padding: 14px 18px; border-left: 4px solid #d63638; background: #fcf0f1; color: #444; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }