/** * Reels de Instagram — hoja de RESPALDO. NOVA * * El sitio de Fondecom ya viste estas clases desde su propia hoja * (fuente/css-paginas.txt, pegada en el Personalizador). Aquí va lo mismo, copiado * valor por valor, con un valor por defecto en cada variable, para que la banda se * vea bien también en un sitio sin esa hoja. * * Especificidad: la misma que la del sitio o menos (una clase; :where() no suma), y * sin !important. Como los valores son idénticos, da igual cuál de las dos hojas se * imprima después. Si algún día el sitio cambia un valor de estas clases, que lo * cambie también aquí, o esta hoja podría ganarle cuando Elementor la imprima en el * pie de la página. * * Nada queda oculto a la espera del JavaScript: sin script, la banda se ve igual y * se recorre con el dedo o la rueda. * */ .frl{ width:100%;overflow-x:auto;overflow-y:hidden;cursor:grab; scrollbar-width:none;-ms-overflow-style:none;padding-block:4px 16px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); /* el avance escribe scrollLeft en cada fotograma: con desplazamiento suave heredado de un tema, cada escritura se convertiría en una animación */ scroll-behavior:auto; } .frl::-webkit-scrollbar{display:none} :where(.frl).drag{cursor:grabbing} :where(.frl.drag) .rl__c{pointer-events:none} :where(.frl) .rl__t{ display:grid;grid-auto-flow:column;grid-auto-columns:208px;gap:14px; width:max-content;padding-inline:var(--gut,clamp(18px,4vw,40px)); } :where(.frl) .rl__c{ position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden; text-decoration:none;box-shadow:var(--s1,0 1px 2px rgba(13,57,116,.06),0 5px 16px rgba(13,57,116,.07)); transition:transform .3s var(--e,cubic-bezier(.22,.61,.36,1)),box-shadow .3s var(--e,cubic-bezier(.22,.61,.36,1)); } /* * La sombra de reposo, otra vez, para la tarjeta que es enlace. Dentro de una página de * Elementor manda «.elementor a{box-shadow:none}» (una clase y una etiqueta), que le gana * a la regla de arriba (una sola clase) y dejaba las tarjetas planas. Esta pesa lo mismo * que la de Elementor y gana porque sale después: el widget encola esta hoja declarándola * dependiente de la de Elementor. Es la misma solución que ya llevaba la galería de * campañas. Al pasar el ratón sigue mandando «.rl__c:hover» (dos clases). */ :where(.frl) a.rl__c{ box-shadow:var(--s1,0 1px 2px rgba(13,57,116,.06),0 5px 16px rgba(13,57,116,.07)); } :where(.frl) .rl__c img{ display:block;max-width:100%;width:100%;height:100%;object-fit:cover; transition:transform .7s var(--e,cubic-bezier(.22,.61,.36,1)); user-select:none;-webkit-user-drag:none; } :where(.frl) .rl__c::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(13,57,116,.28) 0 14%,transparent 34%,rgba(17,17,17,.9)); } :where(.frl) .rl__c:hover{transform:translateY(-6px);box-shadow:var(--s2,0 14px 38px rgba(13,57,116,.14))} :where(.frl) .rl__c:hover img{transform:scale(1.07)} :where(.frl) .rl__ico{position:absolute;top:11px;right:11px;z-index:2} :where(.frl) .rl__ico svg{width:19px;height:19px;fill:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))} :where(.frl) .rl__d{ position:absolute;top:12px;left:11px;z-index:2;font-size:11.5px;font-weight:700; color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6); } :where(.frl) .rl__x{position:absolute;left:12px;right:12px;bottom:11px;z-index:2} :where(.frl) .rl__x b{display:block;font-size:14px;font-weight:800;color:#fff;line-height:1.25} :where(.frl) .rl__x u{text-decoration:none;font-size:11.5px;color:rgba(255,255,255,.8);display:block;margin-top:2px} :where(.frl) .rl__v{display:flex;align-items:center;gap:5px;font-size:12px;color:#fff;margin-top:5px;font-weight:700} :where(.frl) .rl__v svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2} :where(.frl) .num{font-variant-numeric:tabular-nums} /* Quien pide menos movimiento no ve la tarjeta levantarse ni la foto crecer */ @media (prefers-reduced-motion:reduce){ :where(.frl) .rl__c, :where(.frl) .rl__c img{transition:none} } /* * Botón de pausa (1.0.3). A diferencia de lo de arriba, esto NO es respaldo: la hoja del * sitio no tiene nada para él, así que esta es la única regla que lo viste. * * - Va debajo de la banda, fuera de ella (nunca tapa una tarjeta), a la derecha y con el * ancho de caja: la misma cuenta que .wrap, no un ancho nuevo. Su borde derecho es el * del contenido de la página. En el escritorio eso lo deja bajo el botón «Seguir en * Instagram»; en el teléfono (680 px o menos) ese botón pasa a la izquierda y la * pausa sigue a la derecha. * - Aspecto del botón de contorno del sitio (.b--o): blanco, borde gris, tinta; al pasar * el ratón, borde y icono azules (6,5:1 sobre blanco). Mide var(--tap), 48 px. El * cambio al pasar el ratón va dentro de (hover:hover): en una pantalla táctil el * navegador deja el :hover puesto tras el toque y el botón se quedaba azul. * - Pesa dos clases y una etiqueta. Hello Elementor pinta todo