/* ============================================================ RESEÑAS · CARRIL ARRASTRABLE + LECTOR DE RESEÑA COMPLETA (v3) QUE CAMBIA respecto de la v2, y POR QUE: A) LO QUE ESTABA ROTO (medido, no a ojo): 1. El pie del lector se partia en TRES lineas en movil (183 px de alto, el 42 % de la caja a 390x560) y las flechas salian ARRIBA del nombre. Causa: la regla `.dsx-rev-dlg-navs{display:contents}` estaba escrita DESPUES de la media query que le ponia `display:flex; order:3`, con la misma especificidad -> ganaba la de despues. Al ser `display:contents` el envoltorio no tiene caja, asi que su `order:3` no se aplicaba a nada y los botones caian los PRIMEROS del pie. ARREGLO: se acepta `display:contents` SIEMPRE (es lo mas simple) y el orden se pone en los BOTONES, no en el envoltorio. Y en movil el pie pasa a dos lineas: [nombre + cargo] / [boton de G2 ...... flechas]. 2. En pantallas bajas la cita se quedaba sin sitio (146 px utiles a 390x560, para un texto de 653 px). ARREGLO: en pantallas bajas la caja crece (casi todo el alto) y los margenes internos se aprietan. 3. Al llegar a la ultima reseña con el foco en la flecha «siguiente», esa flecha se deshabilitaba y el FOCO SE PERDIA (se iba al ). ARREGLO: si la flecha que tiene el foco se va a deshabilitar, el foco salta a la otra flecha. 4. El texto mas pequeño estaba a 11 px. Sube a 12 px. Lo que ya estaba BIEN y no se toca: la caja nunca se sale de la pantalla (360-1920 y 1440x600 y 390x560 comprobados), la cita hace scroll dentro, la cabecera y el pie no se mueven, la pagina de detras no se mueve, Esc cierra, el foco vuelve al boton que abrio, y las flechas ← → funcionan. B) LAS ANIMACIONES (lo que pedia el encargo): - Entrada Y SALIDA con TRANSICIONES, no con @keyframes: @starting-style + `transition-behavior: allow-discrete` sobre `display` y `overlay`. Al ser transiciones, son INTERRUMPIBLES: si cierras a mitad de la entrada, la caja se va desde donde este, sin saltos. Respaldo con @keyframes para los navegadores que no lo soportan, detectado con @supports (y el guion lo detecta con CSS.supports). - Se parte de scale(.98), nunca de cero. - Entrar: 380 ms con cubic-bezier(.19,1,.22,1) (frenada larga, sin rebote). Salir: 180 ms con cubic-bezier(.4,0,1,1) (corto y seco). - Solo `opacity` y `transform` en la caja; en el fondo, su color y su desenfoque. Nada de anchos, altos ni margenes: eso obliga a recalcular la maquetacion en cada fotograma. - Al pasar de reseña: cruce corto (60 ms de salida + 120 ms de entrada = 180 ms de reloj, medidos fotograma a fotograma en la web publicada) con `blur(2px)` y 8 px de desplazamiento EN EL SENTIDO de la flecha. Interrumpible: cada pulsacion cancela el temporizador anterior, asi que pulsando rapido nunca se encadenan ni se queda a medias. - Botones: `:active` con scale(.94) en 140 ms y aro de foco visible. - `prefers-reduced-motion: reduce`: todo instantaneo, sin romper nada (el guion tambien se salta el cruce y el cierre diferido). ============================================================ */ /* ---------- EL CARRIL ---------- */ [data-vs="testimonials"] .dsx-rev-grid{ flex-wrap:nowrap !important; align-items:stretch; justify-content:flex-start; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding-left:0; cursor:grab; padding-bottom:6px; scrollbar-width:none; -ms-overflow-style:none; /* de serie, INSTANTANEO: el arrastre y la rueda escriben scrollLeft a mano y con desplazamiento suave irian a remolque del dedo */ scroll-behavior:auto; /* los dos extremos se desvanecen para que se note que hay mas a los lados */ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 40px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 40px),transparent 100%); } /* ...pero SUAVE cuando se navega con el teclado: ahi el salto seco desorienta, porque la tarjeta aparece sin que sepas de donde ha venido. El guion pone y quita esta clase segun se use teclado o puntero. */ [data-vs="testimonials"] .dsx-rev-grid.con-teclado{scroll-behavior:smooth} [data-vs="testimonials"] .dsx-rev-grid::-webkit-scrollbar{display:none} [data-vs="testimonials"] .dsx-rev-grid.esta-arrastrando{ cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto; user-select:none;-webkit-user-select:none; } /* OJO: ya NO se pone pointer-events:none a los hijos. Antes hacia falta para que al soltar no se abriera el enlace; ahora de eso se encarga el guion, que anula el clic solo si de verdad hubo arrastre. Quitarlo permite que el boton y los enlaces se puedan pulsar con normalidad. */ [data-vs="testimonials"] .dsx-rev-grid > .dsx-vid, [data-vs="testimonials"] .dsx-rev-grid > .dsx-rev, [data-vs="testimonials"] .dsx-rev-slot > .dsx-vid, [data-vs="testimonials"] .dsx-rev-slot > .dsx-rev{ flex:0 0 392px; max-width:392px; scroll-snap-align:start; } /* el envoltorio que mete Webflow no debe romper la fila */ [data-vs="testimonials"] .dsx-rev-slot{ display:flex; gap:inherit; align-items:stretch; } /* ---------- LA CITA DE LA TARJETA: SEIS LINEAS Y UN DESVANECIDO ---------- La clase va repetida (.dsx-rev .dsx-rev-quote) a proposito: asi gana a cualquier regla anterior que siguiera fijando las diez lineas. */ [data-vs="testimonials"] .dsx-rev .dsx-rev-quote{ display:block; overflow:hidden; max-height:calc(6 * 1.6em); /* 6 lineas ~154 px, antes 10 ~256 px */ -webkit-line-clamp:none; text-wrap:pretty; -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 2.4em),transparent 100%); mask-image:linear-gradient(180deg,#000 calc(100% - 2.4em),transparent 100%); } /* la cita ya no se despliega en su sitio: fuera la transicion y fuera .abierta */ [data-vs="testimonials"] .dsx-rev.abierta .dsx-rev-quote{ max-height:calc(6 * 1.6em); } /* ---------- EL BOTON DE LA TARJETA ---------- */ [data-vs="testimonials"] .dsx-rev-mas{ display:none; align-self:flex-start; margin:10px 0 0; padding:2px 0; border:0;background:none; font:600 12.5px/1.2 Montserrat,Figtree,sans-serif; color:#d8d8de; cursor:pointer; position:relative;z-index:2; /* subrayado que crece al pasar por encima, sin mover nada de sitio */ background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat; background-position:0 100%; background-size:100% 1px; transition:color 180ms ease, background-size 260ms cubic-bezier(.19,1,.22,1), transform 140ms cubic-bezier(.19,1,.22,1); opacity:.82; } [data-vs="testimonials"] .dsx-rev.hay-mas .dsx-rev-mas{display:inline-block} [data-vs="testimonials"] .dsx-rev-mas:hover{color:#fff;opacity:1} [data-vs="testimonials"] .dsx-rev-mas:active{transform:scale(.94)} [data-vs="testimonials"] .dsx-rev-mas:focus-visible{ outline:2px solid #7aa2ff;outline-offset:3px;border-radius:3px;color:#fff;opacity:1; } /* ============================================================ EL LECTOR (dialog nativo) Nativo = trae gratis: cerrar con Esc, fondo inerte, foco atrapado dentro, y el foco vuelve solo al boton que lo abrio. ============================================================ */ dialog.dsx-rev-dlg{ width:min(680px, calc(100vw - 32px)); max-height:min(78vh, 720px); /* dvh = el alto REAL del hueco visible en movil, descontando la barra del navegador. Se deja el vh justo encima como respaldo. */ max-height:min(78dvh, 720px); padding:0; border:0; border-radius:18px; background:rgba(16,16,22,.88); backdrop-filter:blur(26px) saturate(1.15); -webkit-backdrop-filter:blur(26px) saturate(1.15); box-shadow: inset -1px -1px 2px rgba(255,255,255,.20), inset 1px 1px 1px rgba(255,255,255,.05), inset 0 -22px 48px rgba(255,255,255,.043), 0 30px 80px rgba(0,0,0,.62); color:#fff; font-family:"Montserrat Regular",Montserrat,Arial,sans-serif; overflow:visible; /* para que quepan las flechas de fuera en pantalla ancha */ } dialog.dsx-rev-dlg::backdrop{ background:rgba(6,6,10,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } /* ------------------------------------------------------------ ANIMACION DE ABRIR Y CERRAR · CAMINO ANTIGUO (el de por defecto) Con @keyframes. Solo hace falta donde no hay transiciones discretas. La salida la dispara el guion poniendo la clase .dsx-cerrando y esperando a que acabe la animacion antes de llamar de verdad a close(). ------------------------------------------------------------ */ @keyframes dsxRevEntra{ from{opacity:0;transform:translateY(10px) scale(.98)} to {opacity:1;transform:none} } @keyframes dsxRevSale{ from{opacity:1;transform:none} to {opacity:0;transform:translateY(6px) scale(.985)} } @keyframes dsxFondoEntra{ from{opacity:0} to{opacity:1} } @keyframes dsxFondoSale { from{opacity:1} to{opacity:0} } dialog.dsx-rev-dlg[open] {animation:dsxRevEntra 380ms cubic-bezier(.19,1,.22,1) both} dialog.dsx-rev-dlg[open]::backdrop {animation:dsxFondoEntra 380ms ease both} dialog.dsx-rev-dlg.dsx-cerrando {animation:dsxRevSale 180ms cubic-bezier(.4,0,1,1) both} dialog.dsx-rev-dlg.dsx-cerrando::backdrop {animation:dsxFondoSale 180ms ease both} /* ------------------------------------------------------------ ANIMACION DE ABRIR Y CERRAR · CAMINO MODERNO `transition-behavior: allow-discrete` permite ANIMAR propiedades que antes saltaban de golpe (`display` y `overlay`, que es lo que saca al dialogo de la capa superior). Con @starting-style se declara desde DONDE arranca la entrada. Resultado: una sola transicion sirve para abrir y para cerrar, y como es una transicion se puede interrumpir a mitad sin que quede colgada. ------------------------------------------------------------ */ @supports (transition-behavior: allow-discrete){ /* fuera los @keyframes del camino antiguo */ dialog.dsx-rev-dlg[open], dialog.dsx-rev-dlg[open]::backdrop, dialog.dsx-rev-dlg.dsx-cerrando, dialog.dsx-rev-dlg.dsx-cerrando::backdrop{animation:none} /* estado CERRADO = tambien el estado de SALIDA. 180 ms, corto y seco. */ dialog.dsx-rev-dlg{ opacity:0; transform:translateY(6px) scale(.985); transition: opacity 180ms cubic-bezier(.4,0,1,1), transform 180ms cubic-bezier(.4,0,1,1), overlay 180ms cubic-bezier(.4,0,1,1) allow-discrete, display 180ms cubic-bezier(.4,0,1,1) allow-discrete; } /* estado ABIERTO. 380 ms con frenada larga. */ dialog.dsx-rev-dlg[open]{ opacity:1; transform:translateY(0) scale(1); transition: opacity 380ms cubic-bezier(.19,1,.22,1), transform 380ms cubic-bezier(.19,1,.22,1), overlay 380ms cubic-bezier(.19,1,.22,1) allow-discrete, display 380ms cubic-bezier(.19,1,.22,1) allow-discrete; } /* de DONDE sale al abrirse (sin esto entraria de golpe) */ @starting-style{ dialog.dsx-rev-dlg[open]{opacity:0;transform:translateY(10px) scale(.98)} } /* el fondo oscurecido tiene su propia transicion */ dialog.dsx-rev-dlg::backdrop{ background:rgba(6,6,10,0); backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px); transition: background-color 180ms cubic-bezier(.4,0,1,1), backdrop-filter 180ms cubic-bezier(.4,0,1,1), overlay 180ms cubic-bezier(.4,0,1,1) allow-discrete, display 180ms cubic-bezier(.4,0,1,1) allow-discrete; } dialog.dsx-rev-dlg[open]::backdrop{ background:rgba(6,6,10,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition: background-color 380ms ease, backdrop-filter 380ms ease, overlay 380ms ease allow-discrete, display 380ms ease allow-discrete; } @starting-style{ dialog.dsx-rev-dlg[open]::backdrop{background:rgba(6,6,10,0);backdrop-filter:blur(0px)} } } /* ---------- LA CAJA POR DENTRO ---------- */ dialog.dsx-rev-dlg .dsx-rev-dlg-in{ display:flex;flex-direction:column; max-height:inherit; padding:30px 32px 26px; gap:16px; } /* la cabecera y el pie se quedan quietos; solo la cita hace scroll */ dialog.dsx-rev-dlg .dsx-rev-dlg-head{ display:flex;align-items:center;gap:10px; padding-right:56px; /* hueco para la X, que va por encima en absoluto */ flex:0 0 auto; } dialog.dsx-rev-dlg .dsx-rev-dlg-ico{width:20px;height:20px;display:block;flex:0 0 auto} dialog.dsx-rev-dlg .dsx-rev-dlg-badge{ font-size:12px;letter-spacing:.06em;text-transform:uppercase; color:rgba(255,255,255,.55); min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } dialog.dsx-rev-dlg .dsx-rev-dlg-cuenta{ margin-left:auto;font-size:12px;color:rgba(255,255,255,.42); font-variant-numeric:tabular-nums;flex:0 0 auto; } /* ---------- LA CITA (lo unico que hace scroll) ---------- */ dialog.dsx-rev-dlg .dsx-rev-dlg-quote{ flex:1 1 auto; min-height:0; /* sin esto un hijo flex no deja encogerse al padre */ overflow-y:auto; overscroll-behavior:contain; /* al llegar al final NO arrastra la pagina de detras */ font-size:16.5px;line-height:1.72; color:rgba(255,255,255,.92); text-wrap:pretty; white-space:pre-wrap; padding-right:6px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent; -webkit-tap-highlight-color:transparent; } dialog.dsx-rev-dlg .dsx-rev-dlg-quote::-webkit-scrollbar{width:8px} dialog.dsx-rev-dlg .dsx-rev-dlg-quote::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2);border-radius:8px; } /* pista de que queda texto por debajo: se desvanece el ultimo tramo. El guion pone y quita .hay-abajo, asi que al llegar al final la ultima linea se ve entera y no parece cortada. */ dialog.dsx-rev-dlg .dsx-rev-dlg-quote.hay-abajo{ -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 36px),transparent 100%); mask-image:linear-gradient(180deg,#000 calc(100% - 36px),transparent 100%); } /* ---------- EL CRUCE AL PASAR DE RESEÑA ---------- Se le aplica a la cita Y al bloque del nombre, que son los dos trozos que cambian. `--dsx-dx` lo pone el guion con el signo de la flecha pulsada. */ dialog.dsx-rev-dlg .dsx-rev-dlg-quote, dialog.dsx-rev-dlg .dsx-rev-dlg-quien{ transition:opacity 120ms cubic-bezier(.19,1,.22,1), transform 120ms cubic-bezier(.19,1,.22,1), filter 120ms linear; } /* fase 1 · se va (rapido: 60 ms) */ dialog.dsx-rev-dlg.dsx-cambia-sale .dsx-rev-dlg-quote, dialog.dsx-rev-dlg.dsx-cambia-sale .dsx-rev-dlg-quien{ opacity:0; filter:blur(2px); transform:translate3d(var(--dsx-dx,0px),0,0); transition-duration:60ms; transition-timing-function:cubic-bezier(.4,0,1,1); } /* fase 2 · se coloca al otro lado SIN transicion, y al quitarle la clase vuelve a su sitio con la transicion de arriba (150 ms) */ dialog.dsx-rev-dlg.dsx-cambia-entra .dsx-rev-dlg-quote, dialog.dsx-rev-dlg.dsx-cambia-entra .dsx-rev-dlg-quien{ opacity:0; filter:blur(2px); transform:translate3d(var(--dsx-dx,0px),0,0); transition:none; } /* ---------- EL PIE ---------- */ dialog.dsx-rev-dlg .dsx-rev-dlg-foot{ flex:0 0 auto; border-top:1px solid rgba(255,255,255,.1); padding-top:16px; display:flex;align-items:center;flex-wrap:wrap; gap:10px 14px; } /* El envoltorio de las flechas NO tiene caja propia: sus dos botones son hijos directos del pie a efectos de maquetacion. Por eso el `order` va en los BOTONES. (En la v2 el `order` estaba aqui y no hacia nada.) */ dialog.dsx-rev-dlg .dsx-rev-dlg-navs{display:contents} dialog.dsx-rev-dlg .dsx-rev-dlg-quien{min-width:0;flex:1 1 200px;order:1} dialog.dsx-rev-dlg .dsx-rev-dlg-cta{order:2} dialog.dsx-rev-dlg .dsx-rev-dlg-nav{order:3} /* display:block a proposito: son , y sin esto el nombre y el cargo salen pegados en la misma linea («Renzo C.Consultor independiente») */ dialog.dsx-rev-dlg .dsx-rev-dlg-name{display:block;font-size:14px;font-weight:600;color:#fff} dialog.dsx-rev-dlg .dsx-rev-dlg-role{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; margin-top:3px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.5); } dialog.dsx-rev-dlg .dsx-rev-dlg-cta{ font-size:12.5px;font-weight:600;color:#fff;text-decoration:none; border:1px solid rgba(255,255,255,.22);border-radius:999px; padding:9px 16px;white-space:nowrap; transition:background-color 180ms ease,border-color 180ms ease,transform 140ms cubic-bezier(.19,1,.22,1); } dialog.dsx-rev-dlg .dsx-rev-dlg-cta:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)} dialog.dsx-rev-dlg .dsx-rev-dlg-cta:active{transform:scale(.94)} /* ---------- BOTONES: CERRAR Y PASAR DE RESEÑA ---------- El transform va partido en dos variables porque en pantalla ancha las flechas ya usan translateY(-50%) para centrarse: si el :active pusiera un `transform: scale(.94)` a secas, borraria ese centrado y la flecha pegaria un salto de 20 px hacia abajo. */ dialog.dsx-rev-dlg .dsx-rev-dlg-x, dialog.dsx-rev-dlg .dsx-rev-dlg-nav{ appearance:none;border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff;cursor:pointer;border-radius:999px; display:grid;place-items:center; --dsx-centra:translateY(0); --dsx-escala:1; transform:var(--dsx-centra) scale(var(--dsx-escala)); transition:background-color 160ms ease,border-color 160ms ease, transform 140ms cubic-bezier(.19,1,.22,1), opacity 160ms ease; } dialog.dsx-rev-dlg .dsx-rev-dlg-x:active, dialog.dsx-rev-dlg .dsx-rev-dlg-nav:active:not(:disabled){--dsx-escala:.94} dialog.dsx-rev-dlg .dsx-rev-dlg-x{ position:absolute;top:16px;right:16px; width:36px;height:36px;font-size:17px;line-height:1; z-index:2; } dialog.dsx-rev-dlg .dsx-rev-dlg-x:hover, dialog.dsx-rev-dlg .dsx-rev-dlg-nav:hover:not(:disabled){ background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4); } dialog.dsx-rev-dlg .dsx-rev-dlg-x:focus-visible, dialog.dsx-rev-dlg .dsx-rev-dlg-nav:focus-visible, dialog.dsx-rev-dlg .dsx-rev-dlg-cta:focus-visible, dialog.dsx-rev-dlg .dsx-rev-dlg-quote:focus-visible{ outline:2px solid #7aa2ff;outline-offset:3px; } /* las flechas, pegadas fuera de la caja en pantalla ancha */ dialog.dsx-rev-dlg .dsx-rev-dlg-nav{ position:absolute;top:50%; --dsx-centra:translateY(-50%); width:40px;height:40px;font-size:16px; } dialog.dsx-rev-dlg .dsx-rev-dlg-nav[data-dir="-1"]{left:-56px} dialog.dsx-rev-dlg .dsx-rev-dlg-nav[data-dir="1"]{right:-56px} dialog.dsx-rev-dlg .dsx-rev-dlg-nav:disabled{opacity:.3;cursor:default} /* si no caben fuera, se colocan dentro del pie, y AL FINAL (order:3) */ @media (max-width: 860px){ dialog.dsx-rev-dlg{overflow:hidden} dialog.dsx-rev-dlg .dsx-rev-dlg-nav{ position:static; --dsx-centra:translateY(0); width:40px;height:40px; } } /* ---------- MOVIL: el pie en DOS lineas, no en tres ---------- [ nombre + cargo ] [ Read it on G2 ↗ ........ ← → ] `margin-left:auto` en la flecha izquierda empuja el par a la derecha. */ @media (max-width: 600px){ dialog.dsx-rev-dlg .dsx-rev-dlg-in{padding:24px 20px 20px;gap:14px} dialog.dsx-rev-dlg .dsx-rev-dlg-head{padding-right:52px} dialog.dsx-rev-dlg .dsx-rev-dlg-quien{flex:1 1 100%} dialog.dsx-rev-dlg .dsx-rev-dlg-nav[data-dir="-1"]{margin-left:auto} dialog.dsx-rev-dlg .dsx-rev-dlg-x{top:12px;right:12px} } /* ---------- PANTALLAS BAJAS (movil apaisado, portatiles cortos) ---------- Aqui el problema no es el ancho, es el ALTO: la cita se quedaba en 146 px. Se le da casi todo el hueco y se aprietan los margenes internos. */ @media (max-height: 640px){ dialog.dsx-rev-dlg{ max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); } dialog.dsx-rev-dlg .dsx-rev-dlg-in{padding:18px 20px 16px;gap:11px} dialog.dsx-rev-dlg .dsx-rev-dlg-foot{padding-top:12px} dialog.dsx-rev-dlg .dsx-rev-dlg-x{top:10px;right:10px;width:32px;height:32px} } /* la pagina de detras no se mueve mientras el lector esta abierto. `overflow-anchor:none` mata el «anclaje de scroll» de Chrome: mientras el lector entra, el navegador se cree que el contenido de detras ha cambiado de sitio y corrige la posicion 1 o 2 px. Se ve poco, pero es un temblor. */ html.dsx-rev-bloqueado, html.dsx-rev-bloqueado body{overflow:hidden;overflow-anchor:none} /* ---------- QUIEN PIDE MENOS MOVIMIENTO ---------- Todo instantaneo, pero NADA deja de funcionar: la caja sigue apareciendo y desapareciendo, el cruce sigue cambiando el texto (el guion lo escribe directamente) y los botones siguen respondiendo con el color. */ @media (prefers-reduced-motion: reduce){ dialog.dsx-rev-dlg, dialog.dsx-rev-dlg[open], dialog.dsx-rev-dlg.dsx-cerrando, dialog.dsx-rev-dlg::backdrop, dialog.dsx-rev-dlg[open]::backdrop, dialog.dsx-rev-dlg.dsx-cerrando::backdrop{ animation:none !important; transition:none !important; } dialog.dsx-rev-dlg[open]{opacity:1;transform:none} dialog.dsx-rev-dlg[open]::backdrop{background:rgba(6,6,10,.62);backdrop-filter:blur(6px)} dialog.dsx-rev-dlg .dsx-rev-dlg-quote, dialog.dsx-rev-dlg .dsx-rev-dlg-quien, dialog.dsx-rev-dlg .dsx-rev-dlg-x, dialog.dsx-rev-dlg .dsx-rev-dlg-nav, dialog.dsx-rev-dlg .dsx-rev-dlg-cta, [data-vs="testimonials"] .dsx-rev-mas{transition:none !important} dialog.dsx-rev-dlg .dsx-rev-dlg-x:active, dialog.dsx-rev-dlg .dsx-rev-dlg-nav:active:not(:disabled){--dsx-escala:1} [data-vs="testimonials"] .dsx-rev-grid, [data-vs="testimonials"] .dsx-rev-grid.con-teclado{scroll-behavior:auto} }