/** * HMW Reels para Elementor * * Portado del § 09 / 09b de style.css del theme Hazlo Muy Wonder. Cambios * respecto del original: * - Prefijo `hmwe-` en vez de `hmw-`: el plugin puede convivir con el theme * en el mismo sitio y las clases no se pueden pisar. * - Los valores duros (ancho, alto, gap, radio, colores) salen de custom * properties que escriben los controles de estilo del widget. El valor que * está acá es el del Figma original y funciona como fallback. * - El modal se mueve a en el init, así que sus reglas son globales * (no cuelgan del wrapper del widget). */ /* ========================================================================== Tokens del widget OJO: los tokens que manejan los controles de Elementor (ancho, alto, gap, radio, sangrado, fondo, flechas) NO se declaran acá. Elementor los escribe sobre {{WRAPPER}}, que es un ANCESTRO de .hmwe-reels-root — declararlos en el root los pisaría por especificidad de cascada (un valor propio siempre gana sobre uno heredado) y ningún control de estilo tendría efecto. Su default vive como fallback del var() en cada uso. Acá sólo quedan los que ningún control toca. ========================================================================== */ .hmwe-reels-root { --hmwe-text: #FFFFFF; --hmwe-text-inactive: #4B4A4A; --hmwe-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* Texto sólo para lectores de pantalla (mismo patrón que .screen-reader-text del core, replicado acá para no depender del CSS del theme). */ .hmwe-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================== Carrusel ========================================================================== */ /* Wrapper: contexto de posición para las flechas, que van absolutas sobre los lados POR FUERA del overflow de .hmwe-reels (si no, se scrollearían). */ .hmwe-reels-wrap { position: relative; } .hmwe-reels { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .hmwe-reels::-webkit-scrollbar { display: none; } .hmwe-reels.is-dragging { cursor: grabbing; scroll-behavior: auto; } /* Flechas: círculos semitransparentes centrados verticalmente sobre los bordes. Sólo con puntero fino (mouse): en táctil el scroll nativo y el swipe ya cubren la navegación, y ocuparían espacio de más. .is-static las esconde cuando no hay nada que desplazar (lo marca el JS). */ .hmwe-reels__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: none; align-items: center; justify-content: center; width: var(--hmwe-arrow-size, 44px); height: var(--hmwe-arrow-size, 44px); padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: var(--hmwe-text); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color 0.25s var(--hmwe-ease), border-color 0.25s var(--hmwe-ease), color 0.25s var(--hmwe-ease), opacity 0.25s var(--hmwe-ease); } @media (hover: hover) and (pointer: fine) { .hmwe-reels__arrow { display: inline-flex; } .hmwe-reels-root.is-static .hmwe-reels__arrow { display: none; } } .hmwe-reels__arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .hmwe-reels__arrow--prev { inset-inline-start: var(--hmwe-arrow-offset, 12px); } .hmwe-reels__arrow--next { inset-inline-end: var(--hmwe-arrow-offset, 12px); } .hmwe-reels__arrow svg { display: block; } .hmwe-reels__track { display: flex; gap: var(--hmwe-gap, 29px); margin: 0; padding: 0; padding-inline: var(--hmwe-track-pad, 0px); list-style: none; width: max-content; } .hmwe-reel { position: relative; flex: none; width: var(--hmwe-card-w, 253px); height: var(--hmwe-card-h, 399px); } /* La tarjeta es un