/*

██████╗ ██╗      █████╗  ██████╗██╗  ██╗ ██████╗██╗  ██╗ ██████╗ ██████╗ ██╗███╗   ███╗ █████╗          ██████╗ ██████╗ ███╗   ███╗
██╔══██╗██║     ██╔══██╗██╔════╝██║ ██╔╝██╔════╝██║  ██║██╔═══██╗██╔══██╗██║████╗ ████║██╔══██╗        ██╔════╝██╔═══██╗████╗ ████║
██████╔╝██║     ███████║██║     █████╔╝ ██║     ███████║██║   ██║██████╔╝██║██╔████╔██║███████║        ██║     ██║   ██║██╔████╔██║
██╔══██╗██║     ██╔══██║██║     ██╔═██╗ ██║     ██╔══██║██║   ██║██╔══██╗██║██║╚██╔╝██║██╔══██║        ██║     ██║   ██║██║╚██╔╝██║
██████╔╝███████╗██║  ██║╚██████╗██║  ██╗╚██████╗██║  ██║╚██████╔╝██║  ██║██║██║ ╚═╝ ██║██║  ██║ █████╗ ╚██████╗╚██████╔╝██║ ╚═╝ ██║
╚═════╝ ╚══════╝╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝ ╚═════╝ ╚═╝  ╚═╝╚═╝╚═╝     ╚═╝╚═╝  ╚═╝ ╚════╝  ╚═════╝ ╚═════╝ ╚═╝     ╚═╝
*/
.encabezado_css {
    text-align: center;
    margin-bottom: 40px;
}

.grid-efectos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.card-efecto {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s;
}

.card-efecto:hover {
    transform: translateY(-5px);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.card-header h3 {
    margin: 0;
    font-size: 1.1em;
}

.btn-replay {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    color: #7f8c8d;
    transition: color 0.3s;
}

.btn-replay:hover {
    color: #3498db;
}

.demo-area {
    height: 150px;
    background-color: #ecf0f1;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    overflow: hidden;
    position: relative;
}

.caja-demo {
    width: 80px;
    height: 80px;
    background-color: #3498db;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.explicacion {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 15px;
    flex-grow: 1;
}

.code-tabs {
    display: flex;
    margin-bottom: 5px;
}

.tab-btn {
    background: #eee;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.8em;
    border-radius: 4px 4px 0 0;
    margin-right: 2px;
}

.tab-btn.active {
    background: #2c3e50;
    color: white;
}

.code-content {
    background: #2c3e50;
    color: #ecf0f1;
    padding: 10px;
    border-radius: 0 4px 4px 4px;
    font-family: monospace;
    font-size: 0.8em;
    display: none;
    white-space: pre-wrap;
    height: 60px;
    overflow-y: auto;
}

.code-content.active {
    display: block;
}

/* --- EFECTOS --- */

/* 1. Cambio de Color */
.trans-color:hover {            background-color: #e74c3c;
            }

            /* 2. Redondeado */
            .trans-radius:hover {
                border-radius: 50%;
            }

            /* 3. Sombra */
            .trans-shadow:hover {
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            }

            /* 4. Expansión */
            .trans-width:hover {
                width: 100%;
            }

            /* 5. Opacidad */
            .trans-opacity:hover {
                opacity: 0.2;
            }

            /* 6. Rotación */
            .trans-rotate:hover {
                transform: rotate(45deg);
            }

            /* 7. Escala */
            .trans-scale:hover {
                transform: scale(1.5);
            }

            /* 8. Mover */
            .trans-move:hover {
                transform: translateX(20px);
            }

            /* 9. Borde */
            .trans-border:hover {
                border: 5px solid #2ecc71;
            }

            /* 10. Texto */
            .trans-text:hover {
                letter-spacing: 5px;
            }

            /* 11. Rotar 90º */
            .transf-rotate-90:hover {
                transform: rotate(90deg);
            }

            /* 12. Rotar 180º */
            .transf-rotate-180:hover {
                transform: rotate(180deg);
            }

            /* 13. Reducir */
            .transf-scale-down:hover {
                transform: scale(0.5);
            }

            /* 14. Sesgar X */
            .transf-skew-x:hover {
                transform: skewX(20deg);
            }

            /* 15. Sesgar Y */
            .transf-skew-y:hover {
                transform: skewY(20deg);
            }

            /* 16. Subir */
            .transf-translate-y:hover {
                transform: translateY(-20px);
            }

            /* 17. Origen */
            .transf-origin:hover {
                transform-origin: top left;
                transform: rotate(45deg);
            }

            /* 18. Combo */
            .transf-multi:hover {
                transform: rotate(45deg) scale(1.2);
            }

            /* 19. Giro 3D */
            .transf-3d:hover {
                transform: perspective(500px) rotateY(180deg);
            }

            /* 20. Espejo */
            .transf-flip:hover {
                transform: scaleX(-1);
            }

            /* 21. Blur */
            .filt-blur:hover {
                filter: blur(5px);
            }

            /* 22. Grayscale */
            .filt-gray:hover {
                filter: grayscale(100%);
            }

            /* 23. Sepia */
            .filt-sepia:hover {
                filter: sepia(100%);
            }

            /* 24. Brillo */
            .filt-bright:hover {
                filter: brightness(150%);
            }

            /* 25. Contraste */
            .filt-contrast:hover {
                filter: contrast(200%);
            }

            /* 26. Invertir */
            .filt-invert:hover {
                filter: invert(100%);
            }

            /* 27. Saturar */
            .filt-saturate:hover {
                filter: saturate(300%);
            }

            /* 28. Matiz */
            .filt-hue:hover {
                filter: hue-rotate(90deg);
            }

            /* 29. Sombra */
            .filt-drop:hover {
                filter: drop-shadow(0 0 10px red);
            }

            /* 30. Giro */
            .anim-spin:hover {
                animation: spin 1s linear infinite;
            }

            /* 31. Rebote */
            .anim-bounce:hover {
                animation: bounce 0.5s infinite;
            }

            /* 32. Latido */
            .anim-pulse:hover {
                animation: pulse 1s infinite;
            }

            /* 33. Temblor */
            .anim-shake:hover {
                animation: shake 0.3s infinite;
            }

            /* 34. Flash */
            .anim-fade:hover {
                animation: fade 1s infinite;
            }

            /* 35. Color */
            .anim-color:hover {
                animation: color-change 2s infinite;
            }

            /* 36. Morfosis */
            .anim-border:hover {
                animation: border-run 2s infinite;
            }

            /* 37. Balanceo */
            .anim-swing:hover {
                animation: swing 1s ease;
            }

            /* 38. Loader */
            .complex-loader {
                animation: spin 1s linear infinite;
            }

            /* 39. Btn Gradiente */
            .complex-btn {
                background-size: 200% 200%;
                animation: gradient 3s ease infinite;
            }

            /* 40. Typing */
            .anim-type {
                animation: typing 2s steps(9), blink .5s step-end infinite alternate;
            }

            /* 41. Pulse Btn */
            .btn-pulse {
                animation: pulse-shadow 2s infinite;
            }

            /* 42. Accordion */
            .ui-accordion:hover {
                height: 100px;
            }

            /* 43. Modal */
            .ui-modal:hover {
                transform: scale(1);
                opacity: 1;
            }

            /* 44. Sidebar */
            .ui-sidebar:hover {
                transform: translateX(0);
            }

            /* 45. Dropdown */
            .ui-dropdown:hover {
                display: block;
            }

            /* 46. Progress */
            .ui-progress:hover {
                width: 100%;
            }

            /* 47. Range */
            .ui-range:hover {
                left: 100%;
            }

            /* 48. Switch 3D */
            .ui-switch-3d:hover {
                transform: rotateX(0);
            }

            /* 49. Notify */
            .ui-notify:hover {
                right: 20px;
            }

            /* 50. Search */
            .ui-search:hover {
                width: 200px;
            }

            /* 51. FAB */
            .ui-fab:hover {
                transform: scale(1.1) rotate(90deg);
            }

            /* 52. Posición Fondo */
            .trans-bg-pos:hover {
                background-position: 100% 100%;
            }

            /* 53. Glow Texto */
            .trans-text-shadow:hover {
                text-shadow: 0 0 10px white;
            }

            /* 54. Outline */
            .trans-outline:hover {
                outline-offset: 5px;
            }

            /* 55. Blur Hover */
            .trans-filter-blur:hover {
                filter: blur(2px);
            }

            /* 56. Fuente */
            .trans-font-size:hover {
                font-size: 1.2em;
            }

            /* 57. Condensar */
            .trans-spacing-condense:hover {
                letter-spacing: -2px;
            }

            /* 58. Color Borde */
            .trans-border-color:hover {
                border-color: #e74c3c;
            }

            /* 59. Padding */
            .trans-padding:hover {
                padding: 20px;
            }

            /* 60. Margin */
            .trans-margin:hover {
                margin-left: 20px;
            }

            /* 61. Alejar */
            .trans-opacity-scale:hover {
                opacity: 0.5;
                transform: scale(0.8);
            }

            /* 62. Skew+Rot */
            .transf-skew-rotate:hover {
                transform: skew(20deg) rotate(20deg);
            }

            /* 63. Zoom 3D */
            .transf-translate-z:hover {
                transform: translateZ(50px);
            }

            /* 64. Giro X */
            .transf-rotate-x:hover {
                transform: rotateX(45deg);
            }

            /* 65. Puerta */
            .transf-rotate-y-move:hover {
                transform: rotateY(45deg) translateX(10px);
            }

            /* 66. Estirar */
            .transf-stretch:hover {
                transform: scale(1.5, 0.5);
            }

            /* 67. Wobble */
            .transf-wobble:hover {
                animation: wobble;
            }

            /* 68. Pivote BR */
            .transf-origin-br:hover {
                transform-origin: bottom right;
            }

            /* 69. Persp. Low */
            .transf-perspective-low:hover {
                transform: perspective(100px);
            }

            /* 70. Persp. High */
            .transf-perspective-high:hover {
                transform: perspective(1000px);
            }

            /* 71. Matrix */
            .transf-matrix:hover {
                transform: matrix(1, 0.5, -0.5, 1, 0, 0);
            }

            /* 72. Blur+Gray */
            .filt-blur-gray:hover {
                filter: blur(2px) grayscale(100%);
            }

            /* 73. Oscuro */
            .filt-bright-low:hover {
                filter: brightness(50%);
            }

            /* 74. Lavado */
            .filt-contrast-low:hover {
                filter: contrast(50%);
            }

            /* 75. Opuesto */
            .filt-hue-180:hover {
                filter: hue-rotate(180deg);
            }

            /* 76. Grisáceo */
            .filt-invert-50:hover {
                filter: invert(50%);
            }

            /* 77. Apagado */
            .filt-saturate-low:hover {
                filter: saturate(0.2);
            }

            /* 78. Vintage */
            .filt-sepia-low:hover {
                filter: sepia(50%);
            }

            /* 79. Sombra Azul */
            .filt-drop-blue:hover {
                filter: drop-shadow(blue);
            }

            /* 80. Opacidad */
            .filt-opacity:hover {
                filter: opacity(50%);
            }

            /* 81. Multi Sombra */
            .filt-shadows:hover {
                filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
            }

            /* 82. Slide In L */
            .anim-slide-left:hover {
                animation: slide-left 0.5s;
            }

            /* 83. Slide In R */
            .anim-slide-right:hover {
                animation: slide-right 0.5s;
            }

            /* 84. Zoom In */
            .anim-zoom-in:hover {
                animation: zoom-in 0.5s;
            }

            /* 85. Zoom Out */
            .anim-zoom-out:hover {
                animation: zoom-out 0.5s;
            }

            /* 86. Flip Card */
            .anim-flip-card:hover {
                animation: flip-card 1s;
            }

            /* 87. Wiggle */
            .anim-wiggle:hover {
                animation: wiggle 0.2s infinite;
            }

            /* 88. Heartbeat */
            .anim-heartbeat:hover {
                animation: heartbeat 1s infinite;
            }

            /* 89. Rubber */
            .anim-rubber:hover {
                animation: rubberBand 1s;
            }

            /* 90. Flash */
            .anim-flash:hover {
                animation: flash 1s;
            }

            /* 91. Caída */
            .anim-hinge:hover {
                animation: hinge 2s;
            }

            /* 92. Neón */
            .text-neon {
                text-shadow: 0 0 5px #fff, 0 0 20px #ff00de;
            }

            /* 93. Gradiente */
            .text-gradient {
                background: linear-gradient(to right, red, orange);
                background-clip: text;
                color: transparent;
            }

            /* 94. Stroke */
            .text-stroke {
                -webkit-text-stroke: 1px white;
                color: transparent;
            }

            /* 95. Subrayado */
            .text-underline-exp:hover::after {
                width: 100%;
            }

            /* 96. Reveal */
            .text-reveal {
                animation: typing 2s steps(40, end);
            }

            /* 97. Zoom Img */
            .img-zoom-cont:hover .img-zoom {
                transform: scale(1.2);
            }

            /* 98. B&W a Color */
            .img-gray-col:hover {
                filter: grayscale(0);
            }

            /* 99. Overlay */
            .img-overlay-cont:hover .img-overlay {
                opacity: 1;
            }

            /* 100. Círculo */
            .img-circle {
                border-radius: 50%;
            }

            /* 101. Blur Focus */
            .img-blur-focus:hover {
                filter: blur(0);
            }

            /* 102. Toggle */
            .ui-toggle:hover {
                background: #2196F3;
            }

            /* 103. Checkbox */
            .ui-checkbox:hover {
                transform: rotate(45deg);
            }

            /* 104. Input */
            .ui-input:focus {
                width: 100%;
            }

            /* 105. Ripple */
            .ui-ripple:active::after {
                width: 200px;
                height: 200px;
            }

            /* 106. Card Lift */
            .ui-card-lift:hover {
                transform: translateY(-10px);
            }

            /* 107. Ribbon */
            .ui-ribbon::before {
                content: 'NEW';
                transform: rotate(45deg);
            }

            /* 108. Tooltip */
            .ui-tooltip:hover::before {
                opacity: 1;
            }

            /* 109. 3D Card */



            /* 111. Gradient Anim */
            .bg-grad-anim:hover {
                background-position: 100% 50%;
            }

            /* 112. Pattern */
            .bg-pattern:hover {
                background-image: radial-gradient(circle, #333 10%, transparent 10%);
            }

            /* 113. Mask */
            .bg-mask:hover {
                -webkit-mask-image: url('../imagenes/imagen.jpg');
                mask-image: url('../imagenes/imagen.jpg');
            }

            /* 114. Clip Text */
            .bg-clip-text:hover {
                background-clip: text;
                color: transparent;
            }

            /* 115. Blend Mode */
            .bg-blend:hover {
                background-blend-mode: multiply;
            }

            /* 116. Parallax */
            .bg-parallax:hover {
                background-attachment: fixed;
            }

            /* 117. Stripes */
            .bg-stripes:hover {
                background: repeating-linear-gradient(45deg, #333, #333 10px, #444 10px, #444 20px);
            }

            /* 118. Circle Reveal */
            .bg-circ-rev:hover {
                clip-path: circle(100%);
            }

            /* 119. Skew BG */
            .bg-skew:hover {
                transform: skewY(-5deg);
            }

            /* 120. Multi BG */
            .bg-multi:hover {
                background-image: url(1), url(2);
            }

            /* 121. Glass */
            .bg-glass:hover {
                backdrop-filter: blur(10px);
            }

            /* 122. Noise */
            .bg-noise:hover {
                filter: contrast(150%) brightness(100%);
            }

            /* 123. Vignette */
            .bg-vignette:hover {
                box-shadow: inset 0 0 50px #000;
            }

            /* 124. Conic */
            .bg-conic:hover {
                background: conic-gradient(from 0deg, red, yellow, green, blue, red);
            }

            /* 125. Mesh */
            .bg-mesh:hover {
                background-image: radial-gradient(circle, #333 10%, transparent 10%);
            }

            /* 126. Polka */
            .bg-polka:hover {
                background-image: radial-gradient(circle, #333 10%, transparent 10%);
            }

            /* 127. Checkers */
            .bg-check:hover {
                background-image: conic-gradient(from 0deg, red, yellow, green, blue, red);
            }

            /* 128. Zigzag */
            .bg-zigzag:hover {
                background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            }

            /* 129. Waves */
            .bg-waves:hover {
                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSJ3aGl0ZSIgLz4KICA8Y2lyY2xlIGN4PSI1IiBjeT0iNSIgcj0iNCIgZmlsbD0iYmxhY2siIC8+Cjwvc3ZnPg==");
            }

            /* 130. Blur BG */
            .bg-blur-back:hover {
                backdrop-filter: blur(5px);
            }

            /* 131. Double Border */
            .bd-double:hover {
                border: 5px double;
            }

            /* 132. Dashed Anim */
            .bd-dashed:hover {
                border: 2px dashed;
                animation: border-dance;
            }

            /* 133. Gradient Border */
            .bd-grad:hover {
                border-image: linear-gradient(to right, red, orange) 1;
            }

            /* 134. Radius Anim */
            .bd-radius:hover {
                border-radius: 50% 20% / 10% 40%;
            }

            /* 135. Shadow Inner */
            .bd-shadow-in:hover {
                box-shadow: inset 0 0 10px;
            }

            /* 136. Neumorphism */
            .bd-neumorph:hover {
                box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
            }

            /* 137. Glow */
            .bd-glow:hover {
                box-shadow: 0 0 15px cyan;
            }

            /* 138. Outline Offset */
            .bd-outline:hover {
                outline-offset: 5px;
            }

            /* 139. Corner Shape */
            .bd-corner:hover {
                clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            }

            /* 140. Ribbon Border */
            .bd-ribbon:hover {
                border-left: 5px solid red;
            }

            /* 141. Underline Anim */
            .bd-under:hover {
                border-bottom: 2px solid;
                width: 100%;
            }

            /* 142. Bracket */
            .bd-bracket:hover::before {
                content: '[';
            }

            .bd-bracket:hover::after {
                content: ']';
            }

            /* 143. Frame */
            .bd-frame:hover {
                border: 10px solid white;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            }

            /* 144. Stitched */
            .bd-stitch:hover {
                border: 2px dashed white;
                box-shadow: 0 0 0 4px blue;
            }

            /* 145. Rainbow */
            .bd-rainbow:hover {
                box-shadow: 0 0 0 2px red, 0 0 0 4px orange, 0 0 0 6px yellow;
            }

            /* 146. Inset 3D */
            .bd-inset:hover {
                border-top: 2px solid #333;
                border-bottom: 2px solid #fff;
            }

            /* 147. Outset 3D */
            .bd-outset:hover {
                border-top: 2px solid #fff;
                border-bottom: 2px solid #333;
            }

            /* 148. Groove */
            .bd-groove:hover {
                border: 5px groove;
            }

            /* 149. Ridge */
            .bd-ridge:hover {
                border: 5px ridge;
            }

            /* 150. Morph Border */
            .bd-morph:hover {
                border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            }

            /* 151. Tooltip Top */
            .ps-tooltip-t:hover::before {
                content: 'Info';
                top: -20px;
            }

            /* 152. Tooltip Right */
            .ps-tooltip-r:hover::before {
                content: 'Info';
                left: 100%;
            }

            /* 153. Badge */
            .ps-badge:hover::after {
                content: '1';
                background: red;
            }

            /* 154. Quote */
            .ps-quote:hover::before {
                content: '“';
                font-size: 2em;
            }

            /* 155. Arrow */
            .ps-arrow:hover::after {
                content: '';
                border: 5px solid transparent;
            }

            /* 156. Clearfix */
            .ps-clear:hover::after {
                content: '';
                display: table;
                clear: both;
            }

            /* 157. Overlay Icon */
            .ps-icon:hover::after {
                content: '★';
                position: absolute;
            }

            /* 158. Watermark */
            .ps-water:hover::before {
                content: 'DRAFT';
                opacity: 0.1;
            }

            /* 159. Counter */
            .ps-count:hover {
                counter-increment: section;
                content: counter(section);
            }

            /* 160. Ribbon Corner */
            .ps-rib-c:hover::after {
                content: 'NEW';
                transform: rotate(45deg);
            }

            /* 161. Underline Dot */
            .ps-dot:hover::after {
                content: '.';
                color: red;
            }

            /* 162. External Link */
            .ps-ext:hover::after {
                content: '↗';
            }

            /* 163. Required */
            .ps-req:hover::after {
                content: '*';
                color: red;
            }

            /* 164. Placeholder */
            .ps-place:hover::placeholder {
                color: #ccc;
            }

            /* 165. Selection */
            .ps-sel:hover::selection {
                background: yellow;
            }

            /* 166. First Letter */
            .ps-first:hover::first-letter {
                font-size: 2em;
            }

            /* 167. First Line */
            .ps-line:hover::first-line {
                font-weight: bold;
            }

            /* 168. Backdrop */
            .ps-back::backdrop {
                background: rgba(0, 0, 0, 0.5);
            }

            /* 169. Marker */
            .ps-mark:hover::marker {
                color: blue;
            }

            /* 170. File Button */
            .ps-file:hover::file-selector-button {
                background: #eee;
            }

            /* 171. Accordion Open */
            .ui-acc-open:hover {
                max-height: 100px;
            }

            /* 172. Tab Active */
            .ui-tab-act:hover {
                border-bottom: 2px solid blue;
            }

            /* 173. Switch On */
            .ui-sw-on:hover {
                background: green;
                justify-content: flex-end;
            }

            /* 174. Btn Press */
            .ui-btn-press:hover {
                transform: scale(0.95);
            }

            /* 175. Input Valid */
            .ui-valid:hover {
                border-color: green;
            }

            /* 176. Input Invalid */
            .ui-invalid:hover {
                border-color: red;
            }

            /* 177. Loading Bar */
            .ui-load-bar:hover {
                width: 50%;
                background: blue;
            }

            /* 178. Step Active */
            .ui-step:hover {
                background: blue;
                color: white;
            }

            /* 179. Card Hover */
            .ui-card-h:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            }

            /* 180. Menu Slide */
            .ui-menu-s:hover {
                transform: translateX(0);
            }

            /* 181. Toast Show */
            .ui-toast:hover {
                opacity: 1;
                bottom: 20px;
            }

            /* 182. Fab Rotate */
            .ui-fab-r:hover {
                transform: rotate(45deg);
            }

            /* 183. Search Expand */
            .ui-search-e:hover {
                width: 200px;
            }

            /* 184. Nav Link */
            .ui-nav:hover {
                text-decoration: underline;
            }

            /* 185. Dropdown Open */
            .ui-drop:hover {
                display: block;
            }

            /* 186. Modal Show */
            .ui-mod-s:hover {
                visibility: visible;
                opacity: 1;
            }

            /* 187. Sidebar Push */
            .ui-side-p:hover {
                margin-left: 200px;
            }

            /* 188. Sticky Header */
            .ui-stick:hover {
                position: sticky;
                top: 0;
            }

            /* 189. Scroll Snap */
            .ui-snap:hover {
                scroll-snap-align: start;
            }

            /* 190. Focus Ring */
            .ui-focus:hover {
                outline: 2px solid blue;
            }

            /* 191. Grid Gap */
            .lay-gap:hover {
                gap: 20px;
            }

            /* 192. Flex Grow */
            .lay-grow:hover {
                flex-grow: 1;
            }

            /* 193. Flex Shrink */
            .lay-shrink:hover {
                flex-shrink: 1;
            }

            /* 194. Order Change */
            .lay-order:hover {
                order: 2;
            }

            /* 195. Align Self */
            .lay-align:hover {
                align-self: center;
            }

            /* 196. Justify Self */
            .lay-just:hover {
                justify-self: end;
            }

            /* 197. Span Col */
            .lay-span-c:hover {
                grid-column: span 2;
            }

            /* 198. Span Row */
            .lay-span-r:hover {
                grid-row: span 2;
            }

            /* 199. Auto Fit */
            .lay-fit:hover {
                grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            }

            /* 200. Auto Fill */
            .lay-fill:hover {
                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            }

            /* 201. Masonry */
            .lay-mason:hover {
                grid-template-rows: masonry;
            }

            /* 202. Subgrid */
            .lay-sub:hover {
                grid-template-columns: subgrid;
            }

            /* 203. Aspect Ratio */
            .lay-ratio:hover {
                aspect-ratio: 16/9;
            }

            /* 204. Object Fit */
            .lay-obj:hover {
                object-fit: cover;
            }

            /* 205. Object Pos */
            .lay-pos:hover {
                object-position: top;
            }

            /* 206. Float Left */
            .lay-float:hover {
                float: left;
            }

            /* 207. Clear Both */
            .lay-clear:hover {
                clear: both;
            }

            /* 208. Multi Col */
            .lay-cols:hover {
                column-count: 3;
            }

            /* 209. Break Inside */
            .lay-break:hover {
                break-inside: avoid;
            }

            /* 210. Writing Mode */
            .lay-write:hover {
                writing-mode: vertical-rl;
            }

            /* --- ANIMACIONES (KEYFRAMES) --- */

            @keyframes spin {
                0% {
                    transform: rotate(0deg);
                }

                100% {
                    transform: rotate(360deg);
                }
            }

            @keyframes bounce {

                0%,
                100% {
                    transform: translateY(0);
                }

                50% {
                    transform: translateY(-20px);
                }
            }

            @keyframes pulse {
                0% {
                    transform: scale(1);
                }

                50% {
                    transform: scale(1.1);
                }

                100% {
                    transform: scale(1);
                }
            }

            @keyframes shake {

                0%,
                100% {
                    transform: translateX(0);
                }

                25% {
                    transform: translateX(-5px);
                }

                75% {
                    transform: translateX(5px);
                }
            }

            @keyframes fade {

                0%,
                100% {
                    opacity: 1;
                }

                50% {
                    opacity: 0.5;
                }
            }

            @keyframes color-change {
                0% {
                    background-color: #3498db;
                }

                50% {
                    background-color: #e74c3c;
                }

                100% {
                    background-color: #3498db;
                }
            }

            @keyframes border-run {
                0% {
                    border-radius: 0;
                }

                50% {
                    border-radius: 50%;
                }

                100% {
                    border-radius: 0;
                }
            }

            @keyframes swing {
                20% {
                    transform: rotate(15deg);
                }

                40% {
                    transform: rotate(-10deg);
                }

                60% {
                    transform: rotate(5deg);
                }

                80% {
                    transform: rotate(-5deg);
                }

                100% {
                    transform: rotate(0deg);
                }
            }

            @keyframes gradient {
                0% {
                    background-position: 0% 50%;
                }

                50% {
                    background-position: 100% 50%;
                }

                100% {
                    background-position: 0% 50%;
                }
            }

            @keyframes typing {
                from {
                    width: 0;
                }

                to {
                    width: 100%;
                }
            }

            @keyframes blink {
                50% {
                    border-color: transparent;
                }
            }

            @keyframes pulse-shadow {
                0% {
                    box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7);
                }

                70% {
                    box-shadow: 0 0 0 10px rgba(52, 152, 219, 0);
                }

                100% {
                    box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
                }
            }

            @keyframes wobble {
                0% {
                    transform: translateX(0%);
                }

                15% {
                    transform: translateX(-25%) rotate(-5deg);
                }

                30% {
                    transform: translateX(20%) rotate(3deg);
                }

                45% {
                    transform: translateX(-15%) rotate(-3deg);
                }

                60% {
                    transform: translateX(10%) rotate(2deg);
                }

                75% {
                    transform: translateX(-5%) rotate(-1deg);
                }

                100% {
                    transform: translateX(0%);
                }
            }

            @keyframes flip-card {
                0% {
                    transform: rotateY(0);
                }

                100% {
                    transform: rotateY(180deg);
                }
            }

            @keyframes wiggle {

                0%,
                100% {
                    transform: rotate(-3deg);
                }

                50% {
                    transform: rotate(3deg);
                }
            }

            @keyframes zoom-out {
                0% {
                    transform: scale(1);
                }

                50% {
                    transform: scale(0.8);
                }

                100% {
                    transform: scale(1);
                }
            }

            @keyframes border-dance {
                0% {
                    border-color: #3498db;
                }

                50% {
                    border-color: #e74c3c;
                }

                100% {
                    border-color: #3498db;
                }
            }

            @keyframes zoom-in {
                0% {
                    transform: scale(1);
                }

                50% {
                    transform: scale(1.2);
                }

                100% {
                    transform: scale(1);
                }
            }

            @keyframes slide-left {
                0% {
                    transform: translateX(0);
                }

                100% {
                    transform: translateX(-20px);
                }
            }

            @keyframes slide-right {
                0% {
                    transform: translateX(0);
                }

                100% {
                    transform: translateX(20px);
                }
            }

            @keyframes hinge {
                0% {
                    transform: rotate(0);
                    transform-origin: top left;
                    animation-timing-function: ease-in-out;
                }

                20%,
                60% {
                    transform: rotate(80deg);
                    transform-origin: top left;
                    animation-timing-function: ease-in-out;
                }

                40%,
                80% {
                    transform: rotate(60deg);
                    transform-origin: top left;
                    animation-timing-function: ease-in-out;
                    opacity: 1;
                }

                100% {
                    transform: translateY(700px);
                    opacity: 0;
                }
            }

            .version-legend {
                font-size: 0.9em !important;
                color: #e74c3c;
                font-weight: bold;
                margin-top: -10px;
                text-align: center;
            }