/* ============================================================
   DANGOFE OS · SERVICIOS · EL EFECTO 3D AL ENTRAR A UN SERVICIO (servicios-marca-entrada.css, prefijo svm-) · v1.0.0 · 2026-10-23 · chat de Diseño
   Va con servicios-marca-entrada.js, después de servicios-marca.css. Tres formas por [data-e] en la capa .svm-fx: A · En el vidrio · B · El emblema en 3D · C · El servicio entra en 3D.
   Solo se animan transform, opacity, clip-path y máscaras; una sola vez, ~1.5 s; sin sombras; la capa no recibe toques. Con «reducir movimiento» el js ni la crea.
   ============================================================ */
.svm-fx-host { position: relative; }
.svm-fx { position: absolute; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; border-radius: inherit; }
.svm-fx *, .svm-fx *::before, .svm-fx *::after { box-sizing: border-box; }
.svm-fx:not(.is-on) *, .svm-fx:not(.is-on) *::before, .svm-fx:not(.is-on) *::after { animation-play-state: paused !important; }
.svm-capa { position: absolute; inset: 0; }
.svm-capa--izq { clip-path: inset(0 50% 0 0); }
.svm-capa--der { clip-path: inset(0 0 0 50%); }
.svm-sello[data-tam='xl'] { --svm-d: 132px; --svm-h: 64px; }
.svm-fx-pulso { animation: svm-pulso 480ms cubic-bezier(.3, .7, .2, 1) both; }
@keyframes svm-pulso { 0% { transform: scale(1); } 38% { transform: scale(1.24); } 100% { transform: scale(1); } }

/* ---------- A · en el vidrio ---------- */
.svm-fx-tilt-A { transform-origin: 50% 0; animation: svm-tilt-a 900ms cubic-bezier(.2, .8, .25, 1) both; }
@keyframes svm-tilt-a { from { transform: perspective(1000px) rotateX(7deg) translateY(14px) scale(.985); opacity: 0; } 35% { opacity: 1; } to { transform: perspective(1000px) rotateX(0) translateY(0) scale(1); opacity: 1; } }
.svm-hielo { position: absolute; inset: 0; animation: svm-congela 400ms cubic-bezier(.3, .6, .3, 1) 0ms both; }
.svm-hielo__i { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 38%, #000 52%); mask-image: linear-gradient(180deg, transparent 0, transparent 38%, #000 52%); -webkit-mask-size: 100% 260%; mask-size: 100% 260%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0 62%; mask-position: 0 62%; animation: svm-derrite 780ms cubic-bezier(.5, .1, .5, 1) 780ms both; }
.svm-hielo canvas { display: block; width: 100%; height: 100%; }
.svm-hielo::after { content: ''; position: absolute; inset: 0; border: 1.5px solid rgba(128, 255, 255, .85); border-radius: inherit; animation: svm-borde-hielo 1500ms ease-out both; }
@keyframes svm-congela { from { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 3% 3%, 97% 3%, 97% 97%, 3% 97%, 3% 3%); } to { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%); } }
@keyframes svm-derrite { from { -webkit-mask-position: 0 62%; mask-position: 0 62%; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes svm-borde-hielo { 0% { opacity: 0; } 25% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.svm-gota { position: absolute; top: 0; width: var(--tam, 7px); height: calc(var(--tam, 7px) * 1.4); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(128, 255, 255, .8)); opacity: 0; animation: svm-gota 560ms cubic-bezier(.5, 0, .9, .6) var(--dl, 800ms) both; }
@keyframes svm-gota { 0% { transform: translateY(2%); opacity: 0; } 18% { opacity: .95; } 100% { transform: translateY(calc(var(--h, 400px) * .55)); opacity: 0; } }
.svm-rayos { position: absolute; inset: 0; }
.svm-rayos svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.svm-rayos path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22 100; stroke-dashoffset: 22; animation: svm-vuelta 900ms cubic-bezier(.4, .1, .35, 1) 360ms both; }
.svm-r-halo { stroke: #ff5a60; stroke-width: 15px; opacity: .3; }
.svm-r-rojo { stroke: var(--svm-pw, #ec3237); stroke-width: 4.8px; }
.svm-r-blanco { stroke: #fff; stroke-width: 1.8px; }
@keyframes svm-vuelta { from { stroke-dashoffset: 22; } to { stroke-dashoffset: -100; } }
.svm-capa, .svm-rayos { border-radius: inherit; }
.svm-r-borde { position: absolute; inset: 0; border: 2px solid var(--svm-pw, #ec3237); border-radius: inherit; opacity: 0; animation: svm-borde-rojo 1150ms linear 300ms both; }
@keyframes svm-borde-rojo { 0% { opacity: 0; } 8% { opacity: 1; } 16% { opacity: .25; } 26% { opacity: 1; } 72% { opacity: .85; } 100% { opacity: 0; } }
.svm-carga { position: absolute; left: 0; top: 0; width: 100%; height: 6px; background: linear-gradient(90deg, var(--svm-pw, #ec3237), #ffb0b4 70%, #fff); transform-origin: 0 50%; animation: svm-carga 400ms cubic-bezier(.4, .1, .3, 1) 0ms both, svm-carga-fin 280ms ease-in 1200ms both; }
@keyframes svm-carga { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes svm-carga-fin { from { opacity: 1; } to { opacity: 0; } }
.svm-flash { position: absolute; inset: 0; background: rgba(255, 255, 255, .26); opacity: 0; animation: svm-flash 300ms ease-out 1230ms both; }
@keyframes svm-flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.svm-lente { position: absolute; inset: 0; }
.svm-lente::before { content: ''; position: absolute; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, #fff 20%, #fff 80%, transparent); transform: scaleY(0); animation: svm-lente-linea 1100ms ease-out 140ms both; }
.svm-lente::after { content: ''; position: absolute; top: -15%; bottom: -15%; left: 0; width: 38%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6) 50%, transparent); transform: translateX(-120%) skewX(-14deg); animation: svm-lente-barre 900ms cubic-bezier(.45, .05, .3, 1) 480ms both; }
@keyframes svm-lente-linea { 0% { transform: scaleY(0); opacity: 1; } 35% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes svm-lente-barre { from { transform: translateX(-120%) skewX(-14deg); } to { transform: translateX(300%) skewX(-14deg); } }
/* ---------- Power Wave = LUZ, RAYO, ENERGÍA (v1.2, 23-oct; Karla: «lo de Power Wave es luz, un rayo o algo sinónimo de energía»). Tres formas por [data-pw]: 1 · Relámpago · 2 · Haz de luz · 3 · Chispa eléctrica. Sin sombras CSS: el brillo es luz dibujada con capas. ---------- */
.svm-pw-capa { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.svm-pw-capa svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.svm-pw-capa path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* 1 · RELÁMPAGO: un solo rayo limpio baja desde el borde de arriba hasta el logo (halo rojo + cuerpo rojo + alma blanca), destella al tocarlo y se apaga suave; saltan 6 chispas */
.svm-rel path { stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: svm-rel-traza 240ms cubic-bezier(.2, .7, .3, 1) 120ms both, svm-rel-apaga 900ms ease-out 620ms both; }
.svm-rel .halo { stroke: #ff6b70; stroke-width: 16px; opacity: .32; }
.svm-rel .cuerpo { stroke: var(--svm-pw, #ec3237); stroke-width: 5px; }
.svm-rel .alma { stroke: #fff; stroke-width: 2px; }
@keyframes svm-rel-traza { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes svm-rel-apaga { 0% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } }
.svm-rel .halo { animation: svm-rel-traza 240ms cubic-bezier(.2, .7, .3, 1) 120ms both, svm-rel-apaga-h 900ms ease-out 620ms both; }
@keyframes svm-rel-apaga-h { 0% { opacity: .32; } 55% { opacity: .32; } 100% { opacity: 0; } }
.svm-destello { position: absolute; inset: 0; background: radial-gradient(circle at var(--ox, 50%) var(--oy, 20%), rgba(255, 255, 255, .95), rgba(255, 150, 155, .55) 18%, rgba(236, 50, 55, 0) 48%); opacity: 0; animation: svm-destello 700ms ease-out 330ms both; }
@keyframes svm-destello { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.svm-pw-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: svm-pw-flash 260ms ease-out 340ms both; }
[data-theme='dark'] .svm-pw-flash { background: #ffe9ea; }
@keyframes svm-pw-flash { 0% { opacity: 0; } 20% { opacity: .55; } 100% { opacity: 0; } }
.svm-brasa { position: absolute; left: var(--ox, 50%); top: var(--oy, 20%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; opacity: 0; animation: svm-brasa 620ms cubic-bezier(.2, .7, .4, 1) var(--dl, 360ms) both; }
.svm-brasa::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: rgba(255, 90, 96, .55); }
@keyframes svm-brasa { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 40px), var(--dy, 40px)) scale(.2); } }
/* 2 · HAZ DE LUZ: un haz rojo-blanco cruza el vidrio en diagonal como luz que entra; al pasar por el logo lo enciende; después queda un brillo tenue que se va */
.svm-haz { position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; transform: translateX(-130%) skewX(-18deg); background: linear-gradient(100deg, rgba(236, 50, 55, 0) 0, rgba(236, 50, 55, .38) 32%, rgba(255, 255, 255, .92) 50%, rgba(236, 50, 55, .38) 68%, rgba(236, 50, 55, 0) 100%); animation: svm-haz 980ms cubic-bezier(.4, .05, .25, 1) 80ms both; }
@keyframes svm-haz { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(420%) skewX(-18deg); } }
.svm-haz--2 { width: 10%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); animation-delay: 230ms; animation-duration: 900ms; }
.svm-luz-logo { position: absolute; inset: 0; background: radial-gradient(ellipse 160px 70px at var(--ox, 50%) var(--oy, 20%), rgba(255, 255, 255, .85), rgba(255, 120, 124, .45) 40%, rgba(236, 50, 55, 0) 75%); opacity: 0; animation: svm-luz-logo 1100ms ease-out 380ms both; }
@keyframes svm-luz-logo { 0% { opacity: 0; } 18% { opacity: 1; } 60% { opacity: .7; } 100% { opacity: 0; } }
.svm-mota { position: absolute; width: var(--tam, 6px); height: var(--tam, 6px); border-radius: 50%; background: #fff; opacity: 0; animation: svm-mota 700ms ease-out var(--dl, 300ms) both; }
.svm-mota::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: rgba(255, 110, 115, .5); }
@keyframes svm-mota { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(.6) translateY(-14px); } }
/* 3 · CHISPA ELÉCTRICA: la luz roja recorre el borde del vidrio una vez, como un neón que se enciende, con chispas en las esquinas; al cerrar la vuelta el logo se enciende y todo se apaga suave */
.svm-neon path { stroke-dasharray: 26 100; stroke-dashoffset: 26; animation: svm-neon-vuelta 1000ms cubic-bezier(.4, .1, .35, 1) 100ms both, svm-neon-fin 420ms ease-out 1120ms both; }
.svm-neon .halo { stroke: #ff6b70; stroke-width: 14px; opacity: .3; }
.svm-neon .cuerpo { stroke: var(--svm-pw, #ec3237); stroke-width: 4px; }
.svm-neon .alma { stroke: #fff; stroke-width: 1.6px; }
@keyframes svm-neon-vuelta { from { stroke-dashoffset: 26; } to { stroke-dashoffset: -100; } }
@keyframes svm-neon-fin { to { opacity: 0; } }
.svm-neon-marco { position: absolute; inset: 0; border: 2px solid rgba(236, 50, 55, .9); border-radius: inherit; opacity: 0; animation: svm-neon-marco 1000ms ease-out 700ms both; }
@keyframes svm-neon-marco { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.svm-esquina { position: absolute; width: 14px; height: 14px; opacity: 0; transform: scale(.4); background: radial-gradient(circle, #fff 0 25%, rgba(255, 110, 115, .8) 40%, rgba(255, 110, 115, 0) 70%); animation: svm-esquina 360ms ease-out var(--dl, 300ms) both; }
@keyframes svm-esquina { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(.7); } }

/* ---------- B · el emblema en 3D ---------- */
.svm-velo { position: absolute; inset: 0; background: rgba(255, 255, 255, .34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: svm-velo 1750ms ease-in-out both; }
[data-theme='dark'] .svm-velo { background: rgba(8, 16, 46, .42); }
@keyframes svm-velo { 0% { opacity: 0; } 16% { opacity: 1; } 66% { opacity: 1; } 100% { opacity: 0; } }
.svm-escena { position: absolute; left: 50%; top: 50%; width: 0; height: 0; perspective: 780px; }
.svm-mon { position: absolute; left: -66px; top: -66px; width: 132px; height: 132px; transform-style: preserve-3d; animation: svm-mon-vuela 1750ms cubic-bezier(.4, .05, .3, 1) both; }
.svm-mon--powerwave { left: -98px; top: -34px; width: 196px; height: 68px; }
.svm-escena[data-par] .svm-mon--frescos { width: 108px; height: 108px; left: -54px; top: -54px; }
.svm-escena[data-par] .svm-mon--powerwave { width: 168px; height: 58px; left: -84px; top: -29px; }
@keyframes svm-mon-vuela {
  0% { transform: translate3d(var(--ox, 0), 0, 0) scale(.3); opacity: 0; }
  10% { transform: translate3d(var(--ox, 0), 0, 0) scale(1.06); opacity: 1; }
  15% { transform: translate3d(var(--ox, 0), 0, 0) scale(1); opacity: 1; }
  62% { transform: translate3d(var(--ox, 0), 0, 0) scale(1); opacity: 1; }
  90% { transform: translate3d(calc(var(--dx, 0px) + var(--ox, 0px)), var(--dy, 0px), 0) scale(.22); opacity: 1; }
  100% { transform: translate3d(calc(var(--dx, 0px) + var(--ox, 0px)), var(--dy, 0px), 0) scale(.22); opacity: 0; }
}
.svm-mon__c { position: absolute; inset: 0; transform-style: preserve-3d; animation: svm-mon-gira 1750ms cubic-bezier(.5, .05, .3, 1) both; }
@keyframes svm-mon-gira { 0%, 9% { transform: rotateY(0deg); } 62% { transform: rotateY(540deg); } 100% { transform: rotateY(540deg); } }
.svm-mon__f::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .8) 50%, transparent 64%); background-size: 280% 100%; background-position: 135% 0; animation: svm-brillo 1000ms ease-in-out 260ms both; }
@keyframes svm-brillo { from { background-position: 135% 0; } to { background-position: -35% 0; } }
.svm-mon__f { position: absolute; inset: 0; display: grid; place-items: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 50%; }
.svm-mon__f--b { transform: rotateY(180deg); }
.svm-mon--frescos .svm-mon__f--a { background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .8), rgba(128, 255, 255, .5) 36%, rgba(0, 79, 68, .95) 100%); border: 2px solid var(--svm-fr-viva, #00ef61); color: #fff; }
.svm-mon--frescos .svm-mon__f--b { background: transparent; }
.svm-copo { width: 72%; height: 72%; display: block; }
.svm-mon--powerwave .svm-mon__f { border-radius: 16px; }
.svm-mon--powerwave .svm-mon__f--a { background: linear-gradient(135deg, #ff6b70, var(--svm-pw, #ec3237) 45%, #a9151b); border: 2px solid rgba(255, 255, 255, .85); color: #fff; }
.svm-mon--powerwave .svm-mon__f--b { background: #fff; border: 2px solid var(--svm-pw, #ec3237); }
.svm-rayo { width: 34px; height: 46px; display: block; }
.svm-mon--powerwave .svm-rayo { animation: svm-rayo-carga 800ms steps(2, end) 140ms 2 both; }
@keyframes svm-rayo-carga { 0% { opacity: .25; } 50% { opacity: 1; } 100% { opacity: .55; } }
.svm-mon__lg { display: grid; place-items: center; }
.svm-mon__lg .svm-pw--logo { --svm-lh: 21px; }

/* ---------- C · el servicio entra en 3D ---------- */
.svm-fx-tilt-C { transform-origin: 0 50%; animation: svm-tilt-c 840ms cubic-bezier(.2, .9, .25, 1.06) both; }
@keyframes svm-tilt-c { from { transform: perspective(1100px) rotateY(-62deg) translateX(-7%); opacity: 0; } 30% { opacity: 1; } 72% { transform: perspective(1100px) rotateY(4deg) translateX(0); } to { transform: perspective(1100px) rotateY(0) translateX(0); opacity: 1; } }
.svm-barrido { position: absolute; top: -12%; bottom: -12%; left: 0; width: 44%; transform: translateX(-120%) skewX(-14deg); background: linear-gradient(100deg, transparent 0, var(--bc, rgba(160, 255, 245, .62)) 48%, #fff 52%, transparent 100%); animation: svm-barre 1000ms cubic-bezier(.45, .05, .3, 1) 140ms both; }
.svm-barrido--powerwave { --bc: rgba(255, 110, 116, .6); }
.svm-barrido--inv { left: auto; right: 0; transform: translateX(120%) skewX(-14deg); animation-name: svm-barre-inv; }
@keyframes svm-barre { from { transform: translateX(-120%) skewX(-14deg); } to { transform: translateX(300%) skewX(-14deg); } }
@keyframes svm-barre-inv { from { transform: translateX(120%) skewX(-14deg); } to { transform: translateX(-300%) skewX(-14deg); } }
.svm-particulas { position: absolute; inset: 0; }
.svm-cristal, .svm-chispa { position: absolute; width: var(--tam, 10px); height: var(--tam, 10px); opacity: 0; transform: scale(0) rotate(var(--rot, 0deg)); animation: svm-cristal 520ms ease-out var(--dl, 400ms) both; }
.svm-cristal { clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); background: linear-gradient(135deg, #fff, var(--svm-fr-cel, #80ffff)); }
.svm-chispa { height: calc(var(--tam, 14px) * .38); width: calc(var(--tam, 14px) * 1.6); clip-path: polygon(0 60%, 28% 0, 46% 70%, 70% 10%, 100% 100%, 72% 52%, 48% 100%, 28% 42%); background: linear-gradient(90deg, var(--svm-pw, #ec3237), #fff); animation-name: svm-chispa; animation-duration: 420ms; }
@keyframes svm-cristal { 0% { opacity: 0; transform: scale(0) rotate(var(--rot, 0deg)); } 40% { opacity: 1; transform: scale(1.15) rotate(calc(var(--rot, 0deg) + 40deg)); } 100% { opacity: 0; transform: scale(.4) rotate(calc(var(--rot, 0deg) + 90deg)); } }
@keyframes svm-chispa { 0% { opacity: 0; transform: scale(.4) rotate(var(--rot, 0deg)); } 18% { opacity: 1; } 34% { opacity: .15; } 52% { opacity: 1; transform: scale(1.1) rotate(var(--rot, 0deg)); } 100% { opacity: 0; transform: scale(.6) rotate(var(--rot, 0deg)); } }
.svm-cruce { position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; background: linear-gradient(180deg, transparent, #fff 25%, #fff 75%, transparent); opacity: 0; animation: svm-cruce 360ms ease-out 640ms both; }
@keyframes svm-cruce { 0% { opacity: 0; transform: scaleY(.2); } 40% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .svm-fx, .svm-fx-tilt-A, .svm-fx-tilt-C, .svm-fx-pulso { animation: none !important; display: none; } }