/**
 * KMM Animated Text — Hoja de estilos principal
 * Contiene todos los @keyframes y estilos de los 20 shortcodes.
 * Todos los keyframes tienen el prefijo "kmm-" para evitar conflictos.
 *
 * ÍNDICE:
 * 1. Variables CSS y Reset base
 * 2. Grupo 1 — Typewriter
 * 3. Grupo 2 — Animaciones de Color
 * 4. Grupo 3 — Animaciones de Entrada (Intersection Observer)
 * 5. Grupo 4 — Efectos Especiales
 * 6. Grupo 5 — Fondos Animados
 */

/* ═══════════════════════════════════════════════════════
   1. VARIABLES CSS Y BASE
═══════════════════════════════════════════════════════ */
:root {
    --kmm-primary:   #f72585;
    --kmm-secondary: #3a86ff;
    --kmm-dark:      #1a1a2e;
}

.kmm-typed-wrapper,
.kmm-rainbow,
.kmm-glow,
.kmm-color-cycle,
.kmm-gradient-text,
.kmm-highlight,
.kmm-animate,
.kmm-animate-chars,
.kmm-animate-words,
.kmm-glitch,
.kmm-blur-in,
.kmm-wave,
.kmm-counter,
.kmm-scramble,
.kmm-flip-words,
.kmm-outline,
.kmm-neon-flicker,
.kmm-bg-animate,
.kmm-stripe {
    display: inline-block;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════
   2. GRUPO 1 — TYPEWRITER (Typed.js)
═══════════════════════════════════════════════════════ */

/* Wrapper del efecto typewriter */
.kmm-typed-wrapper {
    position: relative;
}

/* Cursor del typewriter */
.typed-cursor {
    opacity: 1;
    animation: kmm-blink 0.7s infinite;
    font-weight: 100;
}

.typed-cursor.typed-cursor--blink {
    animation: kmm-blink 0.7s infinite;
}

@keyframes kmm-blink {
    0%  { opacity: 1; }
    50% { opacity: 0; }
    100%{ opacity: 1; }
}

/* ═══════════════════════════════════════════════════════
   3. GRUPO 2 — ANIMACIONES DE COLOR
═══════════════════════════════════════════════════════ */

/* ── 3.1 Rainbow ── */
.kmm-rainbow {
    background: linear-gradient(
        90deg,
        #ff0000, #ff7700, #ffff00, #00ff00,
        #0000ff, #8b00ff, #ff0000
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-size: 400% 400%;
    animation: kmm-rainbow var(--kmm-rainbow-speed, 4s) linear infinite;
}

.kmm-rainbow--right  { --kmm-rainbow-dir: to right; }
.kmm-rainbow--left   { --kmm-rainbow-dir: to left; animation-direction: reverse; }
.kmm-rainbow--diagonal {
    background: linear-gradient(135deg, #ff0000, #ff7700, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000);
    background-size: 400% 400%;
}

@keyframes kmm-rainbow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── 3.2 Glow ── */
.kmm-glow {
    color: var(--kmm-glow-color, #f72585);
    animation: kmm-glow-pulse var(--kmm-glow-speed, 2s) ease-in-out infinite alternate;
}

.kmm-glow--low    { --kmm-glow-intensity: 5px; }
.kmm-glow--medium { --kmm-glow-intensity: 15px; }
.kmm-glow--high   { --kmm-glow-intensity: 30px; }

@keyframes kmm-glow-pulse {
    from {
        text-shadow:
            0 0 5px var(--kmm-glow-color, #f72585),
            0 0 var(--kmm-glow-intensity, 15px) var(--kmm-glow-color, #f72585);
    }
    to {
        text-shadow:
            0 0 10px var(--kmm-glow-color, #f72585),
            0 0 calc(var(--kmm-glow-intensity, 15px) * 2) var(--kmm-glow-color, #f72585),
            0 0 calc(var(--kmm-glow-intensity, 15px) * 3) var(--kmm-glow-color, #f72585);
    }
}

/* ── 3.3 Color Cycle ── */
.kmm-color-cycle {
    transition: color 0.3s ease;
}

.kmm-color-cycle--instant {
    transition: none;
}

/* ── 3.4 Gradient Text ── */
.kmm-gradient-text {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ── 3.5 Highlight ── */
.kmm-highlight {
    position: relative;
    display: inline;
    background: linear-gradient(var(--kmm-highlight-color, #ffbe0b) 0 0) no-repeat;
    background-position: 0 100%;
    background-size: 0% 0.2em;
    padding-bottom: 0.1em;
    transition: background-size var(--kmm-highlight-duration, 0.8s) var(--kmm-highlight-delay, 0s) ease;
}

.kmm-highlight.kmm-visible,
.kmm-highlight:hover {
    background-size: 100% 0.2em;
}

/* ═══════════════════════════════════════════════════════
   4. GRUPO 3 — ANIMACIONES DE ENTRADA
═══════════════════════════════════════════════════════ */

/* Estado inicial: invisible */
.kmm-animate,
.kmm-char.kmm-animate,
.kmm-word.kmm-animate {
    opacity: 0;
    animation-fill-mode: both;
}

/* Cuando la animación se activa */
.kmm-animate.kmm-animated {
    animation-fill-mode: both;
}

/* ── FADE ── */
@keyframes kmm-fadeIn           { from { opacity: 0; } to { opacity: 1; } }
@keyframes kmm-fadeOut          { from { opacity: 1; } to { opacity: 0; } }
@keyframes kmm-fadeInUp         { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes kmm-fadeInDown       { from { opacity: 0; transform: translate3d(0, -40px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes kmm-fadeInLeft       { from { opacity: 0; transform: translate3d(-40px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes kmm-fadeInRight      { from { opacity: 0; transform: translate3d(40px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes kmm-fadeInUpBig      { from { opacity: 0; transform: translate3d(0, 2000px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes kmm-fadeInDownBig    { from { opacity: 0; transform: translate3d(0, -2000px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes kmm-fadeInLeftBig    { from { opacity: 0; transform: translate3d(-2000px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes kmm-fadeInRightBig   { from { opacity: 0; transform: translate3d(2000px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

/* ── SLIDE ── */
@keyframes kmm-slideInUp        { from { transform: translate3d(0, 100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@keyframes kmm-slideInDown      { from { transform: translate3d(0, -100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@keyframes kmm-slideInLeft      { from { transform: translate3d(-100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@keyframes kmm-slideInRight     { from { transform: translate3d(100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@keyframes kmm-slideOutUp       { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0, -100%, 0); } }
@keyframes kmm-slideOutDown     { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0, 100%, 0); } }
@keyframes kmm-slideOutLeft     { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(-100%, 0, 0); } }
@keyframes kmm-slideOutRight    { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(100%, 0, 0); } }

/* ── BOUNCE ── */
@keyframes kmm-bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    0%   { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
    20%  { transform: scale3d(1.1, 1.1, 1.1); }
    40%  { transform: scale3d(0.9, 0.9, 0.9); }
    60%  { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
    80%  { transform: scale3d(0.97, 0.97, 0.97); }
    100% { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes kmm-bounceOut {
    20% { transform: scale3d(0.9, 0.9, 0.9); }
    50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); }
    100% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
}
@keyframes kmm-bounceInUp {
    0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    0%   { opacity: 0; transform: translate3d(0, 3000px, 0); }
    60%  { opacity: 1; transform: translate3d(0, -20px, 0); }
    75%  { transform: translate3d(0, 10px, 0); }
    90%  { transform: translate3d(0, -5px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}
@keyframes kmm-bounceInDown {
    0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    0%   { opacity: 0; transform: translate3d(0, -3000px, 0); }
    60%  { opacity: 1; transform: translate3d(0, 25px, 0); }
    75%  { transform: translate3d(0, -10px, 0); }
    90%  { transform: translate3d(0, 5px, 0); }
    100% { transform: none; }
}
@keyframes kmm-bounceInLeft {
    0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    0%   { opacity: 0; transform: translate3d(-3000px, 0, 0); }
    60%  { opacity: 1; transform: translate3d(25px, 0, 0); }
    75%  { transform: translate3d(-10px, 0, 0); }
    90%  { transform: translate3d(5px, 0, 0); }
    100% { transform: none; }
}
@keyframes kmm-bounceInRight {
    0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    0%   { opacity: 0; transform: translate3d(3000px, 0, 0); }
    60%  { opacity: 1; transform: translate3d(-25px, 0, 0); }
    75%  { transform: translate3d(10px, 0, 0); }
    90%  { transform: translate3d(-5px, 0, 0); }
    100% { transform: none; }
}

/* ── ZOOM ── */
@keyframes kmm-zoomIn        { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } }
@keyframes kmm-zoomOut       { from { opacity: 1; } 50% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } }
@keyframes kmm-zoomInUp      { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } }
@keyframes kmm-zoomInDown    { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } }
@keyframes kmm-zoomInLeft    { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); } }
@keyframes kmm-zoomInRight   { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); } }

/* ── ROTATE ── */
@keyframes kmm-rotateIn            { from { transform-origin: center; transform: rotate3d(0,0,1,-200deg); opacity: 0; } to { transform-origin: center; transform: none; opacity: 1; } }
@keyframes kmm-rotateOut           { from { transform-origin: center; opacity: 1; } to { transform-origin: center; transform: rotate3d(0,0,1,200deg); opacity: 0; } }
@keyframes kmm-rotateInDownLeft    { from { transform-origin: left bottom; transform: rotate3d(0,0,1,-45deg); opacity: 0; } to { transform-origin: left bottom; transform: none; opacity: 1; } }
@keyframes kmm-rotateInDownRight   { from { transform-origin: right bottom; transform: rotate3d(0,0,1,45deg); opacity: 0; } to { transform-origin: right bottom; transform: none; opacity: 1; } }
@keyframes kmm-rotateInUpLeft      { from { transform-origin: left bottom; transform: rotate3d(0,0,1,45deg); opacity: 0; } to { transform-origin: left bottom; transform: none; opacity: 1; } }
@keyframes kmm-rotateInUpRight     { from { transform-origin: right bottom; transform: rotate3d(0,0,1,-90deg); opacity: 0; } to { transform-origin: right bottom; transform: none; opacity: 1; } }

/* ── FLIP ── */
@keyframes kmm-flipInX {
    from { transform: perspective(400px) rotate3d(1,0,0,90deg); animation-timing-function: ease-in; opacity: 0; }
    40%  { transform: perspective(400px) rotate3d(1,0,0,-20deg); animation-timing-function: ease-in; }
    60%  { transform: perspective(400px) rotate3d(1,0,0,10deg); opacity: 1; }
    80%  { transform: perspective(400px) rotate3d(1,0,0,-5deg); }
    to   { transform: perspective(400px); }
}
@keyframes kmm-flipInY {
    from { transform: perspective(400px) rotate3d(0,1,0,90deg); animation-timing-function: ease-in; opacity: 0; }
    40%  { transform: perspective(400px) rotate3d(0,1,0,-20deg); animation-timing-function: ease-in; }
    60%  { transform: perspective(400px) rotate3d(0,1,0,10deg); opacity: 1; }
    80%  { transform: perspective(400px) rotate3d(0,1,0,-5deg); }
    to   { transform: perspective(400px); }
}
@keyframes kmm-flipOutX {
    from { transform: perspective(400px); }
    30%  { transform: perspective(400px) rotate3d(1,0,0,-20deg); opacity: 1; }
    to   { transform: perspective(400px) rotate3d(1,0,0,90deg); opacity: 0; }
}
@keyframes kmm-flipOutY {
    from { transform: perspective(400px); }
    30%  { transform: perspective(400px) rotate3d(0,1,0,-15deg); opacity: 1; }
    to   { transform: perspective(400px) rotate3d(0,1,0,90deg); opacity: 0; }
}

/* ── ATTENTION SEEKERS ── */
@keyframes kmm-bounce {
    0%, 20%, 53%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0,0,0); }
    40%, 43%            { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0,-30px,0) scaleY(1.1); }
    70%                 { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0,-15px,0) scaleY(1.05); }
    80%                 { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0,0,0) scaleY(0.95); }
    90%                 { transform: translate3d(0,-4px,0) scaleY(1.02); }
}
@keyframes kmm-flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75%      { opacity: 0; }
}
@keyframes kmm-pulse {
    0%   { transform: scale3d(1,1,1); }
    50%  { transform: scale3d(1.05,1.05,1.05); }
    100% { transform: scale3d(1,1,1); }
}
@keyframes kmm-rubberBand {
    0%   { transform: scale3d(1,1,1); }
    30%  { transform: scale3d(1.25,0.75,1); }
    40%  { transform: scale3d(0.75,1.25,1); }
    50%  { transform: scale3d(1.15,0.85,1); }
    65%  { transform: scale3d(0.95,1.05,1); }
    75%  { transform: scale3d(1.05,0.95,1); }
    100% { transform: scale3d(1,1,1); }
}
@keyframes kmm-shake {
    0%, 100% { transform: translate3d(0,0,0); }
    10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px,0,0); }
    20%, 40%, 60%, 80%      { transform: translate3d(10px,0,0); }
}
@keyframes kmm-headShake {
    0%    { transform: translateX(0); }
    6.5%  { transform: translateX(-6px) rotateY(-9deg); }
    18.5% { transform: translateX(5px) rotateY(7deg); }
    31.5% { transform: translateX(-3px) rotateY(-5deg); }
    43.5% { transform: translateX(2px) rotateY(3deg); }
    50%   { transform: translateX(0); }
}
@keyframes kmm-swing {
    20%  { transform: rotate3d(0,0,1,15deg); }
    40%  { transform: rotate3d(0,0,1,-10deg); }
    60%  { transform: rotate3d(0,0,1,5deg); }
    80%  { transform: rotate3d(0,0,1,-5deg); }
    100% { transform: rotate3d(0,0,1,0deg); }
}
@keyframes kmm-tada {
    0%   { transform: scale3d(1,1,1); }
    10%, 20% { transform: scale3d(0.9,0.9,0.9) rotate3d(0,0,1,-3deg); }
    30%, 50%, 70%, 90% { transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg); }
    40%, 60%, 80%      { transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg); }
    100% { transform: scale3d(1,1,1); }
}
@keyframes kmm-wobble {
    0%     { transform: translate3d(0,0,0); }
    15%    { transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg); }
    30%    { transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg); }
    45%    { transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg); }
    60%    { transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg); }
    75%    { transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg); }
    100%   { transform: translate3d(0,0,0); }
}
@keyframes kmm-jello {
    0%, 11.1%, 100%    { transform: translate3d(0,0,0); }
    22.2%  { transform: skewX(-12.5deg) skewY(-12.5deg); }
    33.3%  { transform: skewX(6.25deg) skewY(6.25deg); }
    44.4%  { transform: skewX(-3.125deg) skewY(-3.125deg); }
    55.5%  { transform: skewX(1.5625deg) skewY(1.5625deg); }
    66.6%  { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    77.7%  { transform: skewX(0.390625deg) skewY(0.390625deg); }
    88.8%  { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}
@keyframes kmm-heartBeat {
    0%   { transform: scale(1); }
    14%  { transform: scale(1.3); }
    28%  { transform: scale(1); }
    42%  { transform: scale(1.3); }
    70%  { transform: scale(1); }
}

/* ── LIGHT SPEED ── */
@keyframes kmm-lightSpeedInRight  { from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { transform: skewX(20deg); opacity: 1; } 80% { transform: skewX(-5deg); } to { transform: translate3d(0,0,0); } }
@keyframes kmm-lightSpeedInLeft   { from { transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } 60% { transform: skewX(-20deg); opacity: 1; } 80% { transform: skewX(5deg); } to { transform: translate3d(0,0,0); } }
@keyframes kmm-lightSpeedOutRight { from { opacity: 1; } to { transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } }
@keyframes kmm-lightSpeedOutLeft  { from { opacity: 1; } to { transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } }

/* ── ESPECIALES ── */
@keyframes kmm-hinge {
    0%    { transform-origin: top left; animation-timing-function: ease-in-out; }
    20%, 60% { transform: rotate3d(0,0,1,80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
    40%, 80% { transform: rotate3d(0,0,1,60deg); transform-origin: top left; animation-timing-function: ease-in-out; opacity: 1; }
    to    { transform: translate3d(0, 700px, 0); opacity: 0; }
}
@keyframes kmm-jackInTheBox {
    0%   { opacity: 0; transform: scale(0.1) rotate(30deg); transform-origin: center bottom; }
    50%  { transform: rotate(-10deg); }
    70%  { transform: rotate(3deg); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes kmm-rollIn   { from { opacity: 0; transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes kmm-rollOut  { from { opacity: 1; } to { opacity: 0; transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg); } }

/* Mapa de animaciones → keyframes */
.kmm-animate[data-kmm-effect="fadeIn"].kmm-animated            { animation-name: kmm-fadeIn; }
.kmm-animate[data-kmm-effect="fadeOut"].kmm-animated           { animation-name: kmm-fadeOut; }
.kmm-animate[data-kmm-effect="fadeInUp"].kmm-animated          { animation-name: kmm-fadeInUp; }
.kmm-animate[data-kmm-effect="fadeInDown"].kmm-animated        { animation-name: kmm-fadeInDown; }
.kmm-animate[data-kmm-effect="fadeInLeft"].kmm-animated        { animation-name: kmm-fadeInLeft; }
.kmm-animate[data-kmm-effect="fadeInRight"].kmm-animated       { animation-name: kmm-fadeInRight; }
.kmm-animate[data-kmm-effect="fadeInUpBig"].kmm-animated       { animation-name: kmm-fadeInUpBig; }
.kmm-animate[data-kmm-effect="fadeInDownBig"].kmm-animated     { animation-name: kmm-fadeInDownBig; }
.kmm-animate[data-kmm-effect="fadeInLeftBig"].kmm-animated     { animation-name: kmm-fadeInLeftBig; }
.kmm-animate[data-kmm-effect="fadeInRightBig"].kmm-animated    { animation-name: kmm-fadeInRightBig; }
.kmm-animate[data-kmm-effect="slideInUp"].kmm-animated         { animation-name: kmm-slideInUp; }
.kmm-animate[data-kmm-effect="slideInDown"].kmm-animated       { animation-name: kmm-slideInDown; }
.kmm-animate[data-kmm-effect="slideInLeft"].kmm-animated       { animation-name: kmm-slideInLeft; }
.kmm-animate[data-kmm-effect="slideInRight"].kmm-animated      { animation-name: kmm-slideInRight; }
.kmm-animate[data-kmm-effect="slideOutUp"].kmm-animated        { animation-name: kmm-slideOutUp; }
.kmm-animate[data-kmm-effect="slideOutDown"].kmm-animated      { animation-name: kmm-slideOutDown; }
.kmm-animate[data-kmm-effect="slideOutLeft"].kmm-animated      { animation-name: kmm-slideOutLeft; }
.kmm-animate[data-kmm-effect="slideOutRight"].kmm-animated     { animation-name: kmm-slideOutRight; }
.kmm-animate[data-kmm-effect="bounceIn"].kmm-animated          { animation-name: kmm-bounceIn; }
.kmm-animate[data-kmm-effect="bounceOut"].kmm-animated         { animation-name: kmm-bounceOut; }
.kmm-animate[data-kmm-effect="bounceInUp"].kmm-animated        { animation-name: kmm-bounceInUp; }
.kmm-animate[data-kmm-effect="bounceInDown"].kmm-animated      { animation-name: kmm-bounceInDown; }
.kmm-animate[data-kmm-effect="bounceInLeft"].kmm-animated      { animation-name: kmm-bounceInLeft; }
.kmm-animate[data-kmm-effect="bounceInRight"].kmm-animated     { animation-name: kmm-bounceInRight; }
.kmm-animate[data-kmm-effect="zoomIn"].kmm-animated            { animation-name: kmm-zoomIn; }
.kmm-animate[data-kmm-effect="zoomOut"].kmm-animated           { animation-name: kmm-zoomOut; }
.kmm-animate[data-kmm-effect="zoomInUp"].kmm-animated          { animation-name: kmm-zoomInUp; }
.kmm-animate[data-kmm-effect="zoomInDown"].kmm-animated        { animation-name: kmm-zoomInDown; }
.kmm-animate[data-kmm-effect="zoomInLeft"].kmm-animated        { animation-name: kmm-zoomInLeft; }
.kmm-animate[data-kmm-effect="zoomInRight"].kmm-animated       { animation-name: kmm-zoomInRight; }
.kmm-animate[data-kmm-effect="rotateIn"].kmm-animated          { animation-name: kmm-rotateIn; }
.kmm-animate[data-kmm-effect="rotateOut"].kmm-animated         { animation-name: kmm-rotateOut; }
.kmm-animate[data-kmm-effect="rotateInDownLeft"].kmm-animated  { animation-name: kmm-rotateInDownLeft; }
.kmm-animate[data-kmm-effect="rotateInDownRight"].kmm-animated { animation-name: kmm-rotateInDownRight; }
.kmm-animate[data-kmm-effect="rotateInUpLeft"].kmm-animated    { animation-name: kmm-rotateInUpLeft; }
.kmm-animate[data-kmm-effect="rotateInUpRight"].kmm-animated   { animation-name: kmm-rotateInUpRight; }
.kmm-animate[data-kmm-effect="flipInX"].kmm-animated           { animation-name: kmm-flipInX; backface-visibility: visible !important; }
.kmm-animate[data-kmm-effect="flipInY"].kmm-animated           { animation-name: kmm-flipInY; backface-visibility: visible !important; }
.kmm-animate[data-kmm-effect="flipOutX"].kmm-animated          { animation-name: kmm-flipOutX; backface-visibility: visible !important; }
.kmm-animate[data-kmm-effect="flipOutY"].kmm-animated          { animation-name: kmm-flipOutY; backface-visibility: visible !important; }
.kmm-animate[data-kmm-effect="bounce"].kmm-animated            { animation-name: kmm-bounce; transform-origin: center bottom; }
.kmm-animate[data-kmm-effect="flash"].kmm-animated             { animation-name: kmm-flash; }
.kmm-animate[data-kmm-effect="pulse"].kmm-animated             { animation-name: kmm-pulse; }
.kmm-animate[data-kmm-effect="rubberBand"].kmm-animated        { animation-name: kmm-rubberBand; }
.kmm-animate[data-kmm-effect="shake"].kmm-animated             { animation-name: kmm-shake; }
.kmm-animate[data-kmm-effect="headShake"].kmm-animated         { animation-name: kmm-headShake; }
.kmm-animate[data-kmm-effect="swing"].kmm-animated             { animation-name: kmm-swing; transform-origin: top center; }
.kmm-animate[data-kmm-effect="tada"].kmm-animated              { animation-name: kmm-tada; }
.kmm-animate[data-kmm-effect="wobble"].kmm-animated            { animation-name: kmm-wobble; }
.kmm-animate[data-kmm-effect="jello"].kmm-animated             { animation-name: kmm-jello; transform-origin: center; }
.kmm-animate[data-kmm-effect="heartBeat"].kmm-animated         { animation-name: kmm-heartBeat; animation-timing-function: ease-in-out; }
.kmm-animate[data-kmm-effect="lightSpeedInRight"].kmm-animated { animation-name: kmm-lightSpeedInRight; animation-timing-function: ease-out; }
.kmm-animate[data-kmm-effect="lightSpeedInLeft"].kmm-animated  { animation-name: kmm-lightSpeedInLeft;  animation-timing-function: ease-out; }
.kmm-animate[data-kmm-effect="lightSpeedOutRight"].kmm-animated{ animation-name: kmm-lightSpeedOutRight; animation-timing-function: ease-in; }
.kmm-animate[data-kmm-effect="lightSpeedOutLeft"].kmm-animated { animation-name: kmm-lightSpeedOutLeft;  animation-timing-function: ease-in; }
.kmm-animate[data-kmm-effect="hinge"].kmm-animated             { animation-name: kmm-hinge; }
.kmm-animate[data-kmm-effect="jackInTheBox"].kmm-animated      { animation-name: kmm-jackInTheBox; }
.kmm-animate[data-kmm-effect="rollIn"].kmm-animated            { animation-name: kmm-rollIn; }
.kmm-animate[data-kmm-effect="rollOut"].kmm-animated           { animation-name: kmm-rollOut; }

/* Estilos para animate chars y words */
.kmm-animate-chars,
.kmm-animate-words {
    display: inline-block;
}
.kmm-char,
.kmm-word {
    display: inline-block;
}
.kmm-char-space { width: 0.3em; }

/* ═══════════════════════════════════════════════════════
   5. GRUPO 4 — EFECTOS ESPECIALES
═══════════════════════════════════════════════════════ */

/* ── 5.1 Glitch ── */
.kmm-glitch {
    position: relative;
    color: inherit;
}

.kmm-glitch::before,
.kmm-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.kmm-glitch::before {
    color: var(--kmm-glitch-c1, #f72585);
    animation: kmm-glitch-before var(--kmm-glitch-speed, 3s) infinite linear alternate-reverse;
}

.kmm-glitch::after {
    color: var(--kmm-glitch-c2, #3a86ff);
    animation: kmm-glitch-after var(--kmm-glitch-speed, 3s) infinite linear alternate-reverse;
}

/* Intensidad baja */
.kmm-glitch--low::before  { animation-duration: calc(var(--kmm-glitch-speed, 3s) * 1.5); }
.kmm-glitch--low::after   { animation-duration: calc(var(--kmm-glitch-speed, 3s) * 2); }

/* Intensidad alta */
.kmm-glitch--high::before { animation-duration: calc(var(--kmm-glitch-speed, 3s) * 0.5); }
.kmm-glitch--high::after  { animation-duration: calc(var(--kmm-glitch-speed, 3s) * 0.7); }

@keyframes kmm-glitch-before {
    0%   { clip-path: inset(40% 0 61% 0); transform: skew(0.3deg); }
    10%  { clip-path: inset(92% 0 1% 0); }
    20%  { clip-path: inset(43% 0 1% 0); transform: skew(-0.4deg); }
    30%  { clip-path: inset(25% 0 58% 0); transform: skew(0.5deg); }
    40%  { clip-path: inset(54% 0 7% 0); transform: skew(-0.2deg) translateX(-2px); }
    50%  { clip-path: inset(19% 0 40% 0); transform: skew(0.7deg); }
    60%  { clip-path: inset(47% 0 53% 0); transform: skew(-0.3deg); }
    70%  { clip-path: inset(26% 0 33% 0); transform: skew(0.1deg) translateX(2px); }
    80%  { clip-path: inset(11% 0 19% 0); transform: skew(-0.6deg); }
    90%  { clip-path: inset(68% 0 6% 0); transform: skew(0.4deg); }
    100% { clip-path: inset(40% 0 61% 0); transform: skew(-0.2deg); }
}

@keyframes kmm-glitch-after {
    0%   { clip-path: inset(20% 0 50% 0); transform: skew(-0.3deg) translateX(3px); }
    10%  { clip-path: inset(55% 0 30% 0); transform: skew(0.5deg); }
    20%  { clip-path: inset(10% 0 80% 0); transform: skew(-0.2deg) translateX(-3px); }
    30%  { clip-path: inset(67% 0 14% 0); transform: skew(0.4deg); }
    40%  { clip-path: inset(33% 0 44% 0); transform: skew(-0.5deg); }
    50%  { clip-path: inset(80% 0 5% 0); transform: skew(0.2deg) translateX(4px); }
    60%  { clip-path: inset(15% 0 70% 0); transform: skew(-0.4deg); }
    70%  { clip-path: inset(45% 0 25% 0); transform: skew(0.3deg) translateX(-2px); }
    80%  { clip-path: inset(72% 0 18% 0); transform: skew(-0.1deg); }
    90%  { clip-path: inset(5% 0 90% 0); transform: skew(0.6deg); }
    100% { clip-path: inset(20% 0 50% 0); transform: skew(-0.3deg); }
}

/* ── 5.2 Blur In ── */
.kmm-blur-in {
    animation: kmm-blur-in var(--kmm-blur-duration, 1.2s) var(--kmm-blur-delay, 0s) both;
}

@keyframes kmm-blur-in {
    0%   { filter: blur(20px); opacity: 0; }
    100% { filter: blur(0); opacity: 1; }
}

/* ── 5.3 Wave ── */
.kmm-wave { display: inline-block; }
.kmm-wave-char {
    display: inline-block;
    animation: kmm-wave-anim var(--kmm-wave-speed, 1s) ease-in-out infinite;
}

@keyframes kmm-wave-anim {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(calc(-1 * var(--kmm-wave-amplitude, 10px))); }
}

/* ── 5.4 Counter ── */
.kmm-counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* ── 5.5 Scramble ── */
.kmm-scramble { display: inline-block; }

/* ── 5.6 Flip Words ── */
.kmm-flip-words {
    display: inline-block;
    position: relative;
    perspective: 400px;
    overflow: hidden;
    vertical-align: bottom;
}

.kmm-flip-word {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transform-origin: 50% 0;
    backface-visibility: hidden;
}

.kmm-flip-word.kmm-flip-active {
    display: inline-block;
    position: relative;
    animation: kmm-flip-word-in 0.5s ease forwards;
}

.kmm-flip-word.kmm-flip-exit {
    display: inline-block;
    position: absolute;
    animation: kmm-flip-word-out 0.5s ease forwards;
}

@keyframes kmm-flip-word-in {
    from { transform: rotateX(-90deg); opacity: 0; }
    to   { transform: rotateX(0deg); opacity: 1; }
}
@keyframes kmm-flip-word-out {
    from { transform: rotateX(0deg); opacity: 1; }
    to   { transform: rotateX(90deg); opacity: 0; }
}

/* ── 5.7 Outline ── */
.kmm-outline {
    color: transparent;
    -webkit-text-stroke: 2px var(--kmm-outline-color, #f72585);
    text-stroke: 2px var(--kmm-outline-color, #f72585);
    background: linear-gradient(
        var(--kmm-outline-color, #f72585),
        var(--kmm-outline-color, #f72585)
    ) no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 0% 100%;
    animation: kmm-outline-fill var(--kmm-outline-duration, 2s) ease forwards;
}

@keyframes kmm-outline-fill {
    from { background-size: 0% 100%; }
    to   { background-size: 100% 100%; color: var(--kmm-outline-fill, #ffffff); -webkit-text-stroke: 0; }
}

/* ── 5.8 Neon Flicker ── */
.kmm-neon-flicker {
    color: var(--kmm-neon-color, #f72585);
}

.kmm-neon-flicker--slow   { animation: kmm-neon-flicker-slow   4s linear infinite; }
.kmm-neon-flicker--fast   { animation: kmm-neon-flicker-fast   1.5s linear infinite; }
.kmm-neon-flicker--random { animation: kmm-neon-flicker-random 2.5s linear infinite; }

@keyframes kmm-neon-flicker-slow {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow:
            0 0 7px #fff,
            0 0 10px #fff,
            0 0 21px #fff,
            0 0 42px var(--kmm-neon-color, #f72585),
            0 0 82px var(--kmm-neon-color, #f72585);
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}

@keyframes kmm-neon-flicker-fast {
    0%, 9%, 11%, 100% {
        text-shadow:
            0 0 7px #fff,
            0 0 10px #fff,
            0 0 21px #fff,
            0 0 42px var(--kmm-neon-color, #f72585),
            0 0 82px var(--kmm-neon-color, #f72585);
    }
    10% { text-shadow: none; }
    40%, 42% { text-shadow: 0 0 7px #fff; }
    41% { text-shadow: none; }
}

@keyframes kmm-neon-flicker-random {
    0%, 18%, 20%, 52%, 55%, 100% {
        text-shadow:
            0 0 7px #fff,
            0 0 10px #fff,
            0 0 21px #fff,
            0 0 42px var(--kmm-neon-color, #f72585),
            0 0 82px var(--kmm-neon-color, #f72585);
        opacity: 1;
    }
    19%, 53% { text-shadow: none; opacity: 0.8; }
    21%       { text-shadow: none; opacity: 0.6; }
    54%       { text-shadow: none; opacity: 0.9; }
    80%, 81%  { text-shadow: none; opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════
   6. GRUPO 5 — FONDOS ANIMADOS
═══════════════════════════════════════════════════════ */

/* ── 6.1 Fondo animado ── */
.kmm-bg-animate {
    background: linear-gradient(
        270deg,
        var(--kmm-bg-from, #f72585),
        var(--kmm-bg-to, #3a86ff),
        var(--kmm-bg-from, #f72585)
    );
    background-size: 400% 400%;
    animation: kmm-bg-shift var(--kmm-bg-speed, 3s) ease infinite;
    color: #fff;
    display: inline-block;
}

@keyframes kmm-bg-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── 6.2 Stripe ── */
.kmm-stripe {
    background-image: repeating-linear-gradient(
        var(--kmm-stripe-angle, 45deg),
        var(--kmm-stripe-c1, #f72585),
        var(--kmm-stripe-c1, #f72585) 10px,
        var(--kmm-stripe-c2, #3a86ff) 10px,
        var(--kmm-stripe-c2, #3a86ff) 20px
    );
    background-size: 200% 200%;
    animation: kmm-stripe-move var(--kmm-stripe-speed, 1s) linear infinite;
    color: #fff;
    display: inline-block;
    padding: 4px 12px;
}

@keyframes kmm-stripe-move {
    from { background-position: 0 0; }
    to   { background-position: 56px 56px; }
}

/* ═══════════════════════════════════════════════════════
   BLOQUE GUTENBERG
═══════════════════════════════════════════════════════ */
.kmm-block-wrapper {
    display: block;
    margin: 1em 0;
}

/* ═══════════════════════════════════════════════════════
   MEDIA QUERIES — Accesibilidad (reducir movimiento)
═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .kmm-animate,
    .kmm-char.kmm-animate,
    .kmm-word.kmm-animate,
    .kmm-rainbow,
    .kmm-glow,
    .kmm-glitch::before,
    .kmm-glitch::after,
    .kmm-wave-char,
    .kmm-neon-flicker,
    .kmm-bg-animate,
    .kmm-stripe,
    .kmm-blur-in,
    .kmm-outline,
    .kmm-flip-word {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        background-position: 0 0 !important;
    }

    .kmm-animate { opacity: 1; }
    .kmm-gradient-text { -webkit-text-fill-color: unset; color: unset; }
}