Haz visible el movimiento.

.stagger-list {
  --stagger-delay: 0.1s;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stagger-item {
  animation: staggerFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--stagger-index, 0) * var(--stagger-delay, 0.1s));
}

@keyframes staggerFadeIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stagger-item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

<ul class="stagger-list">
  <li class="stagger-item" style="--stagger-index: 0;">
    <span class="stagger-bullet">1</span>
    <span class="stagger-text">Primer elemento cargado</span>
  </li>
  <li class="stagger-item" style="--stagger-index: 1;">
    <span class="stagger-bullet">2</span>
    <span class="stagger-text">Segundo elemento cargado</span>
  </li>
  <li class="stagger-item" style="--stagger-index: 2;">
    <span class="stagger-bullet">3</span>
    <span class="stagger-text">Tercer elemento cargado</span>
  </li>
</ul>

<!-- HTML -->
<ul class="stagger-list">
  <li class="stagger-item" style="--stagger-index: 0;">
    <span class="stagger-bullet">1</span>
    <span class="stagger-text">Primer elemento cargado</span>
  </li>
  <li class="stagger-item" style="--stagger-index: 1;">
    <span class="stagger-bullet">2</span>
    <span class="stagger-text">Segundo elemento cargado</span>
  </li>
  <li class="stagger-item" style="--stagger-index: 2;">
    <span class="stagger-bullet">3</span>
    <span class="stagger-text">Tercer elemento cargado</span>
  </li>
</ul>

<!-- CSS -->
<style>
.stagger-list {
  --stagger-delay: 0.1s;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stagger-item {
  animation: staggerFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--stagger-index, 0) * var(--stagger-delay, 0.1s));
}

@keyframes staggerFadeIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stagger-item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
</style>

// tailwind.config.js — Configuración para Staggered reveal
module.exports = {
  theme: {
    extend: {
      animation: {
        'staggered-reveal': 'staggered-reveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'staggered-reveal': {
          /* Clases y keyframes coordinados de Staggered reveal */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[staggered-reveal_0.5s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .stagger-list -->
</div>

.toast-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  animation: toastCycle 3.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes toastCycle {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.95);
  }
  14%, 82% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-16px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast-banner {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

<div class="toast-lifecycle">
  <div class="toast-banner">
    <span class="toast-badge">Info</span>
    <div class="toast-msg">
      <strong>Proceso finalizado</strong>
      <p>El archivo se descargó correctamente.</p>
    </div>
    <button class="toast-close-btn" type="button" aria-label="Cerrar notificación">&times;</button>
  </div>
</div>

<!-- HTML -->
<div class="toast-lifecycle">
  <div class="toast-banner">
    <span class="toast-badge">Info</span>
    <div class="toast-msg">
      <strong>Proceso finalizado</strong>
      <p>El archivo se descargó correctamente.</p>
    </div>
    <button class="toast-close-btn" type="button" aria-label="Cerrar notificación">&times;</button>
  </div>
</div>

<!-- CSS -->
<style>
.toast-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  animation: toastCycle 3.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes toastCycle {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.95);
  }
  14%, 82% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-16px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast-banner {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
</style>

// tailwind.config.js — Configuración para Toast entrada y salida
module.exports = {
  theme: {
    extend: {
      animation: {
        'toast-lifecycle': 'toast-lifecycle 3.5s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'toast-lifecycle': {
          /* Clases y keyframes coordinados de Toast entrada y salida */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[toast-lifecycle_3.5s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .toast-banner -->
</div>

.skeleton-card .skeleton-avatar,
.skeleton-card .skeleton-line {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-card .skeleton-avatar,
  .skeleton-card .skeleton-line {
    animation: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }
}

<div class="skeleton-card" role="status" aria-label="Cargando contenido">
  <div class="skeleton-avatar"></div>
  <div class="skeleton-lines">
    <div class="skeleton-line skeleton-line--title"></div>
    <div class="skeleton-line skeleton-line--body"></div>
  </div>
</div>

<!-- HTML -->
<div class="skeleton-card" role="status" aria-label="Cargando contenido">
  <div class="skeleton-avatar"></div>
  <div class="skeleton-lines">
    <div class="skeleton-line skeleton-line--title"></div>
    <div class="skeleton-line skeleton-line--body"></div>
  </div>
</div>

<!-- CSS -->
<style>
.skeleton-card .skeleton-avatar,
.skeleton-card .skeleton-line {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-card .skeleton-avatar,
  .skeleton-card .skeleton-line {
    animation: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }
}
</style>

// tailwind.config.js — Configuración para Skeleton shimmer
module.exports = {
  theme: {
    extend: {
      animation: {
        'skeleton-shimmer': 'skeleton-shimmer 1.8s ease-in-out infinite',
      },
      keyframes: {
        'skeleton-shimmer': {
          /* Clases y keyframes coordinados de Skeleton shimmer */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[skeleton-shimmer_1.8s_ease-in-out]">
  <!-- .skeleton-card -->
</div>

.accordion-item {
  border-radius: 12px;
  overflow: hidden;
}

.accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

.accordion-arrow {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item.is-open .accordion-arrow {
  transform: rotate(180deg);
}

.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item.is-open .accordion-content {
  grid-template-rows: 1fr;
}

.accordion-inner {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-arrow,
  .accordion-content {
    transition: none !important;
  }
}

<div class="accordion-item is-open">
  <button class="accordion-trigger" type="button" aria-expanded="true">
    <span>¿Cómo integrar esta animación?</span>
    <span class="accordion-arrow">&darr;</span>
  </button>
  <div class="accordion-content">
    <div class="accordion-inner">
      <p>Copia el bloque completo de HTML y CSS coordinados y pégalo directamente en tu proyecto.</p>
    </div>
  </div>
</div>

<!-- HTML -->
<div class="accordion-item is-open">
  <button class="accordion-trigger" type="button" aria-expanded="true">
    <span>¿Cómo integrar esta animación?</span>
    <span class="accordion-arrow">&darr;</span>
  </button>
  <div class="accordion-content">
    <div class="accordion-inner">
      <p>Copia el bloque completo de HTML y CSS coordinados y pégalo directamente en tu proyecto.</p>
    </div>
  </div>
</div>

<!-- CSS -->
<style>
.accordion-item {
  border-radius: 12px;
  overflow: hidden;
}

.accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

.accordion-arrow {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item.is-open .accordion-arrow {
  transform: rotate(180deg);
}

.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item.is-open .accordion-content {
  grid-template-rows: 1fr;
}

.accordion-inner {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-arrow,
  .accordion-content {
    transition: none !important;
  }
}
</style>

// tailwind.config.js — Configuración para Acordeón colapsable
module.exports = {
  theme: {
    extend: {
      animation: {
        'accordion': 'accordion 0.35s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'accordion': {
          /* Clases y keyframes coordinados de Acordeón colapsable */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[accordion_0.35s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .accordion-item -->
</div>

.dialog-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 9, 15, 0.6);
  backdrop-filter: blur(4px);
  animation: overlayFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.dialog-surface {
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.25);
  border-radius: 16px;
  animation: dialogPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes overlayFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dialogPop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dialog-overlay,
  .dialog-surface {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

<div class="dialog-overlay">
  <div class="dialog-surface" role="dialog" aria-modal="true" aria-labelledby="dialog-title">
    <div class="dialog-header">
      <span class="dialog-title" id="dialog-title">Confirmar cambios</span>
      <span class="dialog-badge">Producción</span>
    </div>
    <p class="dialog-desc">¿Deseas desplegar la nueva versión al servidor público?</p>
    <div class="dialog-actions">
      <button class="dialog-btn dialog-btn--ghost" type="button">Cancelar</button>
      <button class="dialog-btn dialog-btn--primary" type="button">Confirmar</button>
    </div>
  </div>
</div>

<!-- HTML -->
<div class="dialog-overlay">
  <div class="dialog-surface" role="dialog" aria-modal="true" aria-labelledby="dialog-title">
    <div class="dialog-header">
      <span class="dialog-title" id="dialog-title">Confirmar cambios</span>
      <span class="dialog-badge">Producción</span>
    </div>
    <p class="dialog-desc">¿Deseas desplegar la nueva versión al servidor público?</p>
    <div class="dialog-actions">
      <button class="dialog-btn dialog-btn--ghost" type="button">Cancelar</button>
      <button class="dialog-btn dialog-btn--primary" type="button">Confirmar</button>
    </div>
  </div>
</div>

<!-- CSS -->
<style>
.dialog-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 9, 15, 0.6);
  backdrop-filter: blur(4px);
  animation: overlayFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.dialog-surface {
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.25);
  border-radius: 16px;
  animation: dialogPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes overlayFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dialogPop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dialog-overlay,
  .dialog-surface {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
</style>

// tailwind.config.js — Configuración para Modal con Desenfoque y Pop
module.exports = {
  theme: {
    extend: {
      animation: {
        'modal-backdrop': 'modal-backdrop 0.4s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'modal-backdrop': {
          /* Clases y keyframes coordinados de Modal con Desenfoque y Pop */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[modal-backdrop_0.4s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .dialog-surface -->
</div>

.sheet-drawer {
  width: 100%;
  border-radius: 16px 16px 0 0;
  animation: slideUpSheet 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slideUpSheet {
  from {
    transform: translateY(100%);
    opacity: 0.4;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sheet-drawer {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

<div class="sheet-container">
  <div class="sheet-drawer">
    <div class="sheet-handle"></div>
    <div class="sheet-header">
      <strong>Opciones del recurso</strong>
      <span class="sheet-meta">3 acciones disponibles</span>
    </div>
    <div class="sheet-options">
      <div class="sheet-option">
        <span class="sheet-icon">1</span>
        <span>Compartir enlace</span>
      </div>
      <div class="sheet-option">
        <span class="sheet-icon">2</span>
        <span>Duplicar configuración</span>
      </div>
    </div>
  </div>
</div>

<!-- HTML -->
<div class="sheet-container">
  <div class="sheet-drawer">
    <div class="sheet-handle"></div>
    <div class="sheet-header">
      <strong>Opciones del recurso</strong>
      <span class="sheet-meta">3 acciones disponibles</span>
    </div>
    <div class="sheet-options">
      <div class="sheet-option">
        <span class="sheet-icon">1</span>
        <span>Compartir enlace</span>
      </div>
      <div class="sheet-option">
        <span class="sheet-icon">2</span>
        <span>Duplicar configuración</span>
      </div>
    </div>
  </div>
</div>

<!-- CSS -->
<style>
.sheet-drawer {
  width: 100%;
  border-radius: 16px 16px 0 0;
  animation: slideUpSheet 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slideUpSheet {
  from {
    transform: translateY(100%);
    opacity: 0.4;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sheet-drawer {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
</style>

// tailwind.config.js — Configuración para Bottom Sheet Móvil
module.exports = {
  theme: {
    extend: {
      animation: {
        'bottom-sheet': 'bottom-sheet 0.45s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'bottom-sheet': {
          /* Clases y keyframes coordinados de Bottom Sheet Móvil */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[bottom-sheet_0.45s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .sheet-drawer -->
</div>

.tab-nav-bar {
  position: relative;
  display: inline-flex;
  padding: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tab-slider-pill {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(33.333% - 4px);
  height: calc(100% - 8px);
  background: #7b6ef6;
  border-radius: 999px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: slidePill 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slidePill {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .tab-slider-pill {
    transition: none !important;
    animation: none !important;
  }
}

<nav class="tab-nav-bar">
  <div class="tab-slider-pill"></div>
  <button class="tab-nav-item is-active" type="button">General</button>
  <button class="tab-nav-item" type="button">Métricas</button>
  <button class="tab-nav-item" type="button">Ajustes</button>
</nav>

<!-- HTML -->
<nav class="tab-nav-bar">
  <div class="tab-slider-pill"></div>
  <button class="tab-nav-item is-active" type="button">General</button>
  <button class="tab-nav-item" type="button">Métricas</button>
  <button class="tab-nav-item" type="button">Ajustes</button>
</nav>

<!-- CSS -->
<style>
.tab-nav-bar {
  position: relative;
  display: inline-flex;
  padding: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tab-slider-pill {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(33.333% - 4px);
  height: calc(100% - 8px);
  background: #7b6ef6;
  border-radius: 999px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: slidePill 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slidePill {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .tab-slider-pill {
    transition: none !important;
    animation: none !important;
  }
}
</style>

// tailwind.config.js — Configuración para Pestañas con Indicador Deslizante
module.exports = {
  theme: {
    extend: {
      animation: {
        'tabs-indicator': 'tabs-indicator 0.3s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'tabs-indicator': {
          /* Clases y keyframes coordinados de Pestañas con Indicador Deslizante */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[tabs-indicator_0.3s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .tab-nav-bar -->
</div>

.card-stack-group {
  position: relative;
  width: 220px;
  height: 90px;
}

.stack-card {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 10px 14px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.25);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.stack-card--1 { transform: translateY(0) scale(1); z-index: 3; }
.stack-card--2 { transform: translateY(8px) scale(0.95); z-index: 2; opacity: 0.85; }
.stack-card--3 { transform: translateY(16px) scale(0.9); z-index: 1; opacity: 0.7; }

.card-stack-group:hover .stack-card--2 { transform: translateY(28px) scale(0.97); }
.card-stack-group:hover .stack-card--3 { transform: translateY(56px) scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .stack-card { transition: none !important; }
}

<div class="card-stack-group">
  <div class="stack-card stack-card--3"><span>Aviso de seguridad</span></div>
  <div class="stack-card stack-card--2"><span>Copia de respaldo lista</span></div>
  <div class="stack-card stack-card--1"><span>3 nuevas alertas</span></div>
</div>

<!-- HTML -->
<div class="card-stack-group">
  <div class="stack-card stack-card--3"><span>Aviso de seguridad</span></div>
  <div class="stack-card stack-card--2"><span>Copia de respaldo lista</span></div>
  <div class="stack-card stack-card--1"><span>3 nuevas alertas</span></div>
</div>

<!-- CSS -->
<style>
.card-stack-group {
  position: relative;
  width: 220px;
  height: 90px;
}

.stack-card {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 10px 14px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.25);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.stack-card--1 { transform: translateY(0) scale(1); z-index: 3; }
.stack-card--2 { transform: translateY(8px) scale(0.95); z-index: 2; opacity: 0.85; }
.stack-card--3 { transform: translateY(16px) scale(0.9); z-index: 1; opacity: 0.7; }

.card-stack-group:hover .stack-card--2 { transform: translateY(28px) scale(0.97); }
.card-stack-group:hover .stack-card--3 { transform: translateY(56px) scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .stack-card { transition: none !important; }
}
</style>

// tailwind.config.js — Configuración para Pila de Notificaciones Desplegable
module.exports = {
  theme: {
    extend: {
      animation: {
        'notification-stack': 'notification-stack 0.4s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'notification-stack': {
          /* Clases y keyframes coordinados de Pila de Notificaciones Desplegable */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[notification-stack_0.4s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .card-stack-group -->
</div>

.wizard-stepper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 220px;
}

.step-connector {
  position: absolute;
  top: 50%;
  left: 15px;
  right: 15px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-50%);
  z-index: 1;
}

.step-connector-fill {
  height: 100%;
  width: 50%;
  background: #7b6ef6;
  transform-origin: left center;
  animation: fillStepper 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fillStepper {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .step-connector-fill { animation: none !important; transform: scaleX(1) !important; }
}

<div class="wizard-stepper">
  <div class="step-connector">
    <div class="step-connector-fill"></div>
  </div>
  <div class="step-node is-done">1</div>
  <div class="step-node is-active">2</div>
  <div class="step-node">3</div>
</div>

<!-- HTML -->
<div class="wizard-stepper">
  <div class="step-connector">
    <div class="step-connector-fill"></div>
  </div>
  <div class="step-node is-done">1</div>
  <div class="step-node is-active">2</div>
  <div class="step-node">3</div>
</div>

<!-- CSS -->
<style>
.wizard-stepper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 220px;
}

.step-connector {
  position: absolute;
  top: 50%;
  left: 15px;
  right: 15px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-50%);
  z-index: 1;
}

.step-connector-fill {
  height: 100%;
  width: 50%;
  background: #7b6ef6;
  transform-origin: left center;
  animation: fillStepper 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fillStepper {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .step-connector-fill { animation: none !important; transform: scaleX(1) !important; }
}
</style>

// tailwind.config.js — Configuración para Stepper de Pasos Consecutivos
module.exports = {
  theme: {
    extend: {
      animation: {
        'stepper-progress': 'stepper-progress 0.6s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'stepper-progress': {
          /* Clases y keyframes coordinados de Stepper de Pasos Consecutivos */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[stepper-progress_0.6s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .wizard-stepper -->
</div>

.menu-popover {
  width: 200px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.25);
  border-radius: 12px;
  padding: 6px;
  transform-origin: top center;
  animation: dropMenu 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes dropMenu {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-popover {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

<div class="menu-popover">
  <div class="menu-item"><span class="menu-dot"></span><span>Editar perfil</span></div>
  <div class="menu-item"><span class="menu-dot"></span><span>Facturación</span></div>
  <div class="menu-item menu-item--danger"><span class="menu-dot"></span><span>Cerrar sesión</span></div>
</div>

<!-- HTML -->
<div class="menu-popover">
  <div class="menu-item"><span class="menu-dot"></span><span>Editar perfil</span></div>
  <div class="menu-item"><span class="menu-dot"></span><span>Facturación</span></div>
  <div class="menu-item menu-item--danger"><span class="menu-dot"></span><span>Cerrar sesión</span></div>
</div>

<!-- CSS -->
<style>
.menu-popover {
  width: 200px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.25);
  border-radius: 12px;
  padding: 6px;
  transform-origin: top center;
  animation: dropMenu 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes dropMenu {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-popover {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
</style>

// tailwind.config.js — Configuración para Menú Desplegable con Escala y Desenfoque
module.exports = {
  theme: {
    extend: {
      animation: {
        'dropdown-reveal': 'dropdown-reveal 0.3s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'dropdown-reveal': {
          /* Clases y keyframes coordinados de Menú Desplegable con Escala y Desenfoque */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[dropdown-reveal_0.3s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .menu-popover -->
</div>

.drawer-preview {
  position: relative;
  width: 100%;
  max-width: 260px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  animation: drawerBackdrop 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 70%;
  background: #141523;
  border-right: 1px solid rgba(123, 110, 246, 0.3);
  padding: 10px;
  animation: drawerSlide 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes drawerSlide {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes drawerBackdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer-panel, .drawer-backdrop { animation: none !important; opacity: 1 !important; transform: none !important; }
}

<div class="drawer-preview">
  <div class="drawer-backdrop"></div>
  <aside class="drawer-panel">
    <div class="drawer-header">
      <strong>Navegación</strong>
      <span class="drawer-chip">Activo</span>
    </div>
    <ul class="drawer-menu">
      <li><span>Resumen</span></li>
      <li><span>Proyectos</span></li>
      <li><span>Ajustes</span></li>
    </ul>
  </aside>
</div>

<!-- HTML -->
<div class="drawer-preview">
  <div class="drawer-backdrop"></div>
  <aside class="drawer-panel">
    <div class="drawer-header">
      <strong>Navegación</strong>
      <span class="drawer-chip">Activo</span>
    </div>
    <ul class="drawer-menu">
      <li><span>Resumen</span></li>
      <li><span>Proyectos</span></li>
      <li><span>Ajustes</span></li>
    </ul>
  </aside>
</div>

<!-- CSS -->
<style>
.drawer-preview {
  position: relative;
  width: 100%;
  max-width: 260px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  animation: drawerBackdrop 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 70%;
  background: #141523;
  border-right: 1px solid rgba(123, 110, 246, 0.3);
  padding: 10px;
  animation: drawerSlide 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes drawerSlide {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes drawerBackdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer-panel, .drawer-backdrop { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Panel Lateral Deslizable (Off-canvas Drawer)
module.exports = {
  theme: {
    extend: {
      animation: {
        'drawer-sidebar': 'drawer-sidebar 0.45s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'drawer-sidebar': {
          /* Clases y keyframes coordinados de Panel Lateral Deslizable (Off-canvas Drawer) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[drawer-sidebar_0.45s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .drawer-preview -->
</div>

.tooltip-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform-origin: bottom center;
  background: #7b6ef6;
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(123, 110, 246, 0.35);
  animation: tooltipSpring 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes tooltipSpring {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(6px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tooltip-bubble { animation: none !important; opacity: 1 !important; transform: translateX(-50%) !important; }
}

<div class="tooltip-container">
  <div class="tooltip-bubble">
    <span>Guardado en la nube</span>
    <div class="tooltip-arrow"></div>
  </div>
  <button class="tooltip-trigger-btn" type="button">Ver estado</button>
</div>

<!-- HTML -->
<div class="tooltip-container">
  <div class="tooltip-bubble">
    <span>Guardado en la nube</span>
    <div class="tooltip-arrow"></div>
  </div>
  <button class="tooltip-trigger-btn" type="button">Ver estado</button>
</div>

<!-- CSS -->
<style>
.tooltip-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform-origin: bottom center;
  background: #7b6ef6;
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(123, 110, 246, 0.35);
  animation: tooltipSpring 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes tooltipSpring {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(6px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tooltip-bubble { animation: none !important; opacity: 1 !important; transform: translateX(-50%) !important; }
}
</style>

// tailwind.config.js — Configuración para Tooltip con Anclaje y Despegue Elástico
module.exports = {
  theme: {
    extend: {
      animation: {
        'tooltip-anchor': 'tooltip-anchor 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) infinite',
      },
      keyframes: {
        'tooltip-anchor': {
          /* Clases y keyframes coordinados de Tooltip con Anclaje y Despegue Elástico */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[tooltip-anchor_0.35s_cubic-bezier(0.34, 1.56, 0.64, 1)]">
  <!-- .tooltip-container -->
</div>

.badge-ping-pill {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ff6e65;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border: 2px solid #0f101a;
  animation: badgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes badgePop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .badge-ping-pill { animation: none !important; opacity: 1 !important; transform: scale(1) !important; }
}

<div class="badge-box">
  <div class="badge-base-icon">Bandeja de entrada</div>
  <span class="badge-ping-pill">+9</span>
</div>

<!-- HTML -->
<div class="badge-box">
  <div class="badge-base-icon">Bandeja de entrada</div>
  <span class="badge-ping-pill">+9</span>
</div>

<!-- CSS -->
<style>
.badge-ping-pill {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ff6e65;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border: 2px solid #0f101a;
  animation: badgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes badgePop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .badge-ping-pill { animation: none !important; opacity: 1 !important; transform: scale(1) !important; }
}
</style>

// tailwind.config.js — Configuración para Contador Pop con Rebote Dinámico
module.exports = {
  theme: {
    extend: {
      animation: {
        'badge-counter': 'badge-counter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite',
      },
      keyframes: {
        'badge-counter': {
          /* Clases y keyframes coordinados de Contador Pop con Rebote Dinámico */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[badge-counter_0.5s_cubic-bezier(0.34, 1.56, 0.64, 1)]">
  <!-- .badge-box -->
</div>

.segmented-bar {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.segment-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(33.333% - 2.6px);
  background: #7b6ef6;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(123, 110, 246, 0.3);
  animation: slidePill 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slidePill {
  from { transform: translateX(0); }
  to { transform: translateX(100%); } /* Hacia 'Semana' */
}

@media (prefers-reduced-motion: reduce) {
  .segment-pill { animation: none !important; transform: translateX(100%) !important; }
}

<div class="segmented-bar">
  <div class="segment-pill"></div>
  <button class="segment-item" type="button">Día</button>
  <button class="segment-item is-active" type="button">Semana</button>
  <button class="segment-item" type="button">Mes</button>
</div>

<!-- HTML -->
<div class="segmented-bar">
  <div class="segment-pill"></div>
  <button class="segment-item" type="button">Día</button>
  <button class="segment-item is-active" type="button">Semana</button>
  <button class="segment-item" type="button">Mes</button>
</div>

<!-- CSS -->
<style>
.segmented-bar {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.segment-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(33.333% - 2.6px);
  background: #7b6ef6;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(123, 110, 246, 0.3);
  animation: slidePill 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slidePill {
  from { transform: translateX(0); }
  to { transform: translateX(100%); } /* Hacia 'Semana' */
}

@media (prefers-reduced-motion: reduce) {
  .segment-pill { animation: none !important; transform: translateX(100%) !important; }
}
</style>

// tailwind.config.js — Configuración para Selector Segmentado con Pastilla Deslizante
module.exports = {
  theme: {
    extend: {
      animation: {
        'segmented-control': 'segmented-control 0.4s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'segmented-control': {
          /* Clases y keyframes coordinados de Selector Segmentado con Pastilla Deslizante */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[segmented-control_0.4s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .segmented-bar -->
</div>

.collapsible-card {
  width: 100%;
  max-width: 250px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.25);
  border-radius: 12px;
  overflow: hidden;
}

.collapsible-body {
  display: grid;
  grid-template-rows: 0fr;
  animation: expandGrid 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.collapsible-content {
  overflow: hidden;
}

@keyframes expandGrid {
  from { grid-template-rows: 0fr; opacity: 0; }
  to { grid-template-rows: 1fr; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .collapsible-body { animation: none !important; grid-template-rows: 1fr !important; opacity: 1 !important; }
}

<div class="collapsible-card">
  <div class="collapsible-head">
    <span>Detalles del plan</span>
    <span class="collapsible-arrow">&darr;</span>
  </div>
  <div class="collapsible-body">
    <div class="collapsible-content">
      <p>Almacenamiento SSD 500GB con respaldo diario continuo.</p>
    </div>
  </div>
</div>

<!-- HTML -->
<div class="collapsible-card">
  <div class="collapsible-head">
    <span>Detalles del plan</span>
    <span class="collapsible-arrow">&darr;</span>
  </div>
  <div class="collapsible-body">
    <div class="collapsible-content">
      <p>Almacenamiento SSD 500GB con respaldo diario continuo.</p>
    </div>
  </div>
</div>

<!-- CSS -->
<style>
.collapsible-card {
  width: 100%;
  max-width: 250px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.25);
  border-radius: 12px;
  overflow: hidden;
}

.collapsible-body {
  display: grid;
  grid-template-rows: 0fr;
  animation: expandGrid 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.collapsible-content {
  overflow: hidden;
}

@keyframes expandGrid {
  from { grid-template-rows: 0fr; opacity: 0; }
  to { grid-template-rows: 1fr; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .collapsible-body { animation: none !important; grid-template-rows: 1fr !important; opacity: 1 !important; }
}
</style>

// tailwind.config.js — Configuración para Tarjeta Colapsable con Despliegue Suave
module.exports = {
  theme: {
    extend: {
      animation: {
        'collapsible-card': 'collapsible-card 0.4s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'collapsible-card': {
          /* Clases y keyframes coordinados de Tarjeta Colapsable con Despliegue Suave */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[collapsible-card_0.4s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .collapsible-card -->
</div>

.speed-mini-btn {
  animation: popItem 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i, 1) * 0.08s);
}

.speed-main-btn {
  animation: rotateFab 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes popItem {
  from { opacity: 0; transform: translateY(16px) scale(0.6); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rotateFab {
  from { transform: rotate(0deg); }
  to { transform: rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .speed-mini-btn, .speed-main-btn { animation: none !important; opacity: 1 !important; transform: none !important; }
}

<div class="speed-dial-box">
  <div class="speed-items">
    <button class="speed-mini-btn" style="--i: 2;" type="button" aria-label="Mensaje">M</button>
    <button class="speed-mini-btn" style="--i: 1;" type="button" aria-label="Adjuntar">A</button>
  </div>
  <button class="speed-main-btn" type="button" aria-label="Acciones">+</button>
</div>

<!-- HTML -->
<div class="speed-dial-box">
  <div class="speed-items">
    <button class="speed-mini-btn" style="--i: 2;" type="button" aria-label="Mensaje">M</button>
    <button class="speed-mini-btn" style="--i: 1;" type="button" aria-label="Adjuntar">A</button>
  </div>
  <button class="speed-main-btn" type="button" aria-label="Acciones">+</button>
</div>

<!-- CSS -->
<style>
.speed-mini-btn {
  animation: popItem 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i, 1) * 0.08s);
}

.speed-main-btn {
  animation: rotateFab 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes popItem {
  from { opacity: 0; transform: translateY(16px) scale(0.6); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rotateFab {
  from { transform: rotate(0deg); }
  to { transform: rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .speed-mini-btn, .speed-main-btn { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Menú Flotante Radial (Speed Dial FAB)
module.exports = {
  theme: {
    extend: {
      animation: {
        'floating-action-menu': 'floating-action-menu 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) infinite',
      },
      keyframes: {
        'floating-action-menu': {
          /* Clases y keyframes coordinados de Menú Flotante Radial (Speed Dial FAB) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[floating-action-menu_0.45s_cubic-bezier(0.34, 1.56, 0.64, 1)]">
  <!-- .speed-dial-box -->
</div>

.dropzone-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 20px;
  border-radius: 14px;
  border: 2px dashed rgba(123, 110, 246, 0.4);
  background: rgba(123, 110, 246, 0.04);
  animation: dropzoneGlow 1.6s ease-in-out infinite;
}

@keyframes dropzoneGlow {
  0%, 100% {
    border-color: rgba(123, 110, 246, 0.35);
    box-shadow: 0 0 0 0 rgba(123, 110, 246, 0.2);
    transform: scale(1);
  }
  50% {
    border-color: rgba(61, 221, 168, 0.8);
    box-shadow: 0 0 18px rgba(61, 221, 168, 0.25);
    transform: scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dropzone-box { animation: none !important; transform: none !important; }
}

<div class="dropzone-box">
  <div class="dropzone-icon">&uarr;</div>
  <strong>Arrastra tus archivos aquí</strong>
  <span>o examina desde tu dispositivo</span>
</div>

<!-- HTML -->
<div class="dropzone-box">
  <div class="dropzone-icon">&uarr;</div>
  <strong>Arrastra tus archivos aquí</strong>
  <span>o examina desde tu dispositivo</span>
</div>

<!-- CSS -->
<style>
.dropzone-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 20px;
  border-radius: 14px;
  border: 2px dashed rgba(123, 110, 246, 0.4);
  background: rgba(123, 110, 246, 0.04);
  animation: dropzoneGlow 1.6s ease-in-out infinite;
}

@keyframes dropzoneGlow {
  0%, 100% {
    border-color: rgba(123, 110, 246, 0.35);
    box-shadow: 0 0 0 0 rgba(123, 110, 246, 0.2);
    transform: scale(1);
  }
  50% {
    border-color: rgba(61, 221, 168, 0.8);
    box-shadow: 0 0 18px rgba(61, 221, 168, 0.25);
    transform: scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dropzone-box { animation: none !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Zona de Carga con Pulso Magnético (Dropzone)
module.exports = {
  theme: {
    extend: {
      animation: {
        'drag-drop-zone': 'drag-drop-zone 1.6s ease-in-out infinite',
      },
      keyframes: {
        'drag-drop-zone': {
          /* Clases y keyframes coordinados de Zona de Carga con Pulso Magnético (Dropzone) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[drag-drop-zone_1.6s_ease-in-out]">
  <!-- .dropzone-box -->
</div>

.dock-shelf {
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 20px;
  background: rgba(20, 21, 35, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.dock-app-icon.is-focused {
  animation: dockZoom 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes dockZoom {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-8px) scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .dock-app-icon.is-focused { animation: none !important; transform: none !important; }
}

<div class="dock-shelf">
  <div class="dock-app-icon" style="--bg: #7b6ef6;">A</div>
  <div class="dock-app-icon is-focused" style="--bg: #3ddda8;">B</div>
  <div class="dock-app-icon" style="--bg: #ff6e65;">C</div>
  <div class="dock-app-icon" style="--bg: #ffbd2e;">D</div>
</div>

<!-- HTML -->
<div class="dock-shelf">
  <div class="dock-app-icon" style="--bg: #7b6ef6;">A</div>
  <div class="dock-app-icon is-focused" style="--bg: #3ddda8;">B</div>
  <div class="dock-app-icon" style="--bg: #ff6e65;">C</div>
  <div class="dock-app-icon" style="--bg: #ffbd2e;">D</div>
</div>

<!-- CSS -->
<style>
.dock-shelf {
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 20px;
  background: rgba(20, 21, 35, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.dock-app-icon.is-focused {
  animation: dockZoom 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes dockZoom {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-8px) scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .dock-app-icon.is-focused { animation: none !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Barra Flotante con Magnificación (Dock)
module.exports = {
  theme: {
    extend: {
      animation: {
        'dock-magnification': 'dock-magnification 0.35s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'dock-magnification': {
          /* Clases y keyframes coordinados de Barra Flotante con Magnificación (Dock) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[dock-magnification_0.35s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .dock-shelf -->
</div>

.cmd-dialog {
  width: 100%;
  max-width: 250px;
  border-radius: 14px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.35);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
  animation: cmdAppear 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cmdAppear {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cmd-dialog { animation: none !important; opacity: 1 !important; transform: none !important; }
}

<div class="cmd-dialog">
  <div class="cmd-bar">
    <span class="cmd-icon">&sect;</span>
    <input type="text" placeholder="Buscar comando..." value="Cambiar tema" readonly />
    <kbd>ESC</kbd>
  </div>
  <div class="cmd-row is-active">
    <span>Alternar modo oscuro</span>
    <span class="cmd-arrow">&crarr;</span>
  </div>
</div>

<!-- HTML -->
<div class="cmd-dialog">
  <div class="cmd-bar">
    <span class="cmd-icon">&sect;</span>
    <input type="text" placeholder="Buscar comando..." value="Cambiar tema" readonly />
    <kbd>ESC</kbd>
  </div>
  <div class="cmd-row is-active">
    <span>Alternar modo oscuro</span>
    <span class="cmd-arrow">&crarr;</span>
  </div>
</div>

<!-- CSS -->
<style>
.cmd-dialog {
  width: 100%;
  max-width: 250px;
  border-radius: 14px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.35);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
  animation: cmdAppear 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cmdAppear {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cmd-dialog { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Paleta de Comandos (Spotlight Modal)
module.exports = {
  theme: {
    extend: {
      animation: {
        'command-palette': 'command-palette 0.3s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'command-palette': {
          /* Clases y keyframes coordinados de Paleta de Comandos (Spotlight Modal) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[command-palette_0.3s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .cmd-dialog -->
</div>

.star-glyph {
  display: inline-block;
  color: #ffbd2e;
  font-size: 20px;
  animation: starPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--star-idx, 0) * 0.08s);
}

@keyframes starPop {
  0% { transform: scale(0.2); opacity: 0; }
  60% { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .star-glyph { animation: none !important; opacity: 1 !important; transform: none !important; }
}

<div class="star-rating">
  <span class="star-glyph" style="--star-idx: 0;">&#9733;</span>
  <span class="star-glyph" style="--star-idx: 1;">&#9733;</span>
  <span class="star-glyph" style="--star-idx: 2;">&#9733;</span>
  <span class="star-glyph" style="--star-idx: 3;">&#9733;</span>
  <span class="star-glyph" style="--star-idx: 4;">&#9733;</span>
</div>

<!-- HTML -->
<div class="star-rating">
  <span class="star-glyph" style="--star-idx: 0;">&#9733;</span>
  <span class="star-glyph" style="--star-idx: 1;">&#9733;</span>
  <span class="star-glyph" style="--star-idx: 2;">&#9733;</span>
  <span class="star-glyph" style="--star-idx: 3;">&#9733;</span>
  <span class="star-glyph" style="--star-idx: 4;">&#9733;</span>
</div>

<!-- CSS -->
<style>
.star-glyph {
  display: inline-block;
  color: #ffbd2e;
  font-size: 20px;
  animation: starPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--star-idx, 0) * 0.08s);
}

@keyframes starPop {
  0% { transform: scale(0.2); opacity: 0; }
  60% { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .star-glyph { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Calificación Estelar en Cascada (Rating Stars)
module.exports = {
  theme: {
    extend: {
      animation: {
        'rating-stars': 'rating-stars 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite',
      },
      keyframes: {
        'rating-stars': {
          /* Clases y keyframes coordinados de Calificación Estelar en Cascada (Rating Stars) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[rating-stars_0.5s_cubic-bezier(0.34, 1.56, 0.64, 1)]">
  <!-- .star-rating -->
</div>

.expandable-search-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.4);
  animation: searchExpand 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes searchExpand {
  from { width: 50px; }
  to { width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .expandable-search-box { animation: none !important; width: 220px !important; }
}

<div class="expandable-search-box">
  <span class="search-lead-icon">&#128269;</span>
  <input class="search-input-field" type="text" placeholder="Buscar componentes..." />
  <button class="search-close-btn" type="button">&times;</button>
</div>

<!-- HTML -->
<div class="expandable-search-box">
  <span class="search-lead-icon">&#128269;</span>
  <input class="search-input-field" type="text" placeholder="Buscar componentes..." />
  <button class="search-close-btn" type="button">&times;</button>
</div>

<!-- CSS -->
<style>
.expandable-search-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.4);
  animation: searchExpand 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes searchExpand {
  from { width: 50px; }
  to { width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .expandable-search-box { animation: none !important; width: 220px !important; }
}
</style>

// tailwind.config.js — Configuración para Barra de Búsqueda Expansiva (Expandable Search)
module.exports = {
  theme: {
    extend: {
      animation: {
        'expandable-search': 'expandable-search 0.4s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'expandable-search': {
          /* Clases y keyframes coordinados de Barra de Búsqueda Expansiva (Expandable Search) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[expandable-search_0.4s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .expandable-search-box -->
</div>

.otp-cell {
  width: 36px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.3);
  font-family: monospace;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  animation: otpPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--cell-idx, 0) * 0.08s);
}

@keyframes otpPop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .otp-cell { animation: none !important; opacity: 1 !important; transform: none !important; }
}

<div class="otp-container">
  <span class="otp-cell is-filled" style="--cell-idx: 0;">4</span>
  <span class="otp-cell is-filled" style="--cell-idx: 1;">8</span>
  <span class="otp-cell is-active" style="--cell-idx: 2;">|</span>
  <span class="otp-cell" style="--cell-idx: 3;"></span>
</div>

<!-- HTML -->
<div class="otp-container">
  <span class="otp-cell is-filled" style="--cell-idx: 0;">4</span>
  <span class="otp-cell is-filled" style="--cell-idx: 1;">8</span>
  <span class="otp-cell is-active" style="--cell-idx: 2;">|</span>
  <span class="otp-cell" style="--cell-idx: 3;"></span>
</div>

<!-- CSS -->
<style>
.otp-cell {
  width: 36px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.3);
  font-family: monospace;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  animation: otpPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--cell-idx, 0) * 0.08s);
}

@keyframes otpPop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .otp-cell { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Celdas de Código OTP (OTP Verification Field)
module.exports = {
  theme: {
    extend: {
      animation: {
        'otp-verification-field': 'otp-verification-field 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) infinite',
      },
      keyframes: {
        'otp-verification-field': {
          /* Clases y keyframes coordinados de Celdas de Código OTP (OTP Verification Field) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[otp-verification-field_0.45s_cubic-bezier(0.34, 1.56, 0.64, 1)]">
  <!-- .otp-container -->
</div>

.capsule-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: #7b6ef6;
  box-shadow: 0 2px 8px rgba(123, 110, 246, 0.4);
  animation: capsuleSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

@media (prefers-reduced-motion: reduce) {
  .capsule-thumb { animation: none !important; transform: none !important; }
}

<div class="capsule-switch">
  <span class="capsule-thumb"></span>
  <span class="capsule-opt is-active">Mensual</span>
  <span class="capsule-opt">Anual -20%</span>
</div>

<!-- HTML -->
<div class="capsule-switch">
  <span class="capsule-thumb"></span>
  <span class="capsule-opt is-active">Mensual</span>
  <span class="capsule-opt">Anual -20%</span>
</div>

<!-- CSS -->
<style>
.capsule-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: #7b6ef6;
  box-shadow: 0 2px 8px rgba(123, 110, 246, 0.4);
  animation: capsuleSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

@media (prefers-reduced-motion: reduce) {
  .capsule-thumb { animation: none !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Cápsula Selectora Segmentada (Pill Capsule)
module.exports = {
  theme: {
    extend: {
      animation: {
        'segmented-pill-capsule': 'segmented-pill-capsule 0.35s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'segmented-pill-capsule': {
          /* Clases y keyframes coordinados de Cápsula Selectora Segmentada (Pill Capsule) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[segmented-pill-capsule_0.35s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .capsule-switch -->
</div>

.bank-card-3d {
  width: 170px;
  height: 105px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1f2138 0%, #0d0e17 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: cardTilt3D 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cardTilt3D {
  0% { transform: perspective(600px) rotateY(-25deg) rotateX(15deg); }
  50% { transform: perspective(600px) rotateY(15deg) rotateX(-10deg); }
  100% { transform: perspective(600px) rotateY(0deg) rotateX(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bank-card-3d { animation: none !important; transform: none !important; }
}

<div class="bank-card-3d">
  <div class="card-chip-gold"></div>
  <div class="card-number-dots">&bull;&bull;&bull;&bull; 4242</div>
  <div class="card-holder-name">HUGO ADAMA</div>
</div>

<!-- HTML -->
<div class="bank-card-3d">
  <div class="card-chip-gold"></div>
  <div class="card-number-dots">&bull;&bull;&bull;&bull; 4242</div>
  <div class="card-holder-name">HUGO ADAMA</div>
</div>

<!-- CSS -->
<style>
.bank-card-3d {
  width: 170px;
  height: 105px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1f2138 0%, #0d0e17 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: cardTilt3D 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cardTilt3D {
  0% { transform: perspective(600px) rotateY(-25deg) rotateX(15deg); }
  50% { transform: perspective(600px) rotateY(15deg) rotateX(-10deg); }
  100% { transform: perspective(600px) rotateY(0deg) rotateX(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bank-card-3d { animation: none !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Tarjeta Bancaria en Perspectiva 3D (Credit Card 3D)
module.exports = {
  theme: {
    extend: {
      animation: {
        'credit-card-3d': 'credit-card-3d 0.6s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'credit-card-3d': {
          /* Clases y keyframes coordinados de Tarjeta Bancaria en Perspectiva 3D (Credit Card 3D) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[credit-card-3d_0.6s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .bank-card-3d -->
</div>

.dock-tab.is-active {
  color: #fff;
  background: #7b6ef6;
  border-radius: 50%;
  animation: dockTabPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes dockTabPop {
  0% { transform: scale(0.6) translateY(4px); }
  60% { transform: scale(1.15) translateY(-4px); }
  100% { transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .dock-tab.is-active { animation: none !important; transform: none !important; }
}

<nav class="bottom-dock-nav">
  <button class="dock-tab is-active" type="button">&#8962;</button>
  <button class="dock-tab" type="button">&#128269;</button>
  <button class="dock-tab" type="button">&#9829;</button>
  <button class="dock-tab" type="button">&#9881;</button>
</nav>

<!-- HTML -->
<nav class="bottom-dock-nav">
  <button class="dock-tab is-active" type="button">&#8962;</button>
  <button class="dock-tab" type="button">&#128269;</button>
  <button class="dock-tab" type="button">&#9829;</button>
  <button class="dock-tab" type="button">&#9881;</button>
</nav>

<!-- CSS -->
<style>
.dock-tab.is-active {
  color: #fff;
  background: #7b6ef6;
  border-radius: 50%;
  animation: dockTabPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes dockTabPop {
  0% { transform: scale(0.6) translateY(4px); }
  60% { transform: scale(1.15) translateY(-4px); }
  100% { transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .dock-tab.is-active { animation: none !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Barra de Navegación Móvil (Bottom Nav Dock)
module.exports = {
  theme: {
    extend: {
      animation: {
        'bottom-nav-dock': 'bottom-nav-dock 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite',
      },
      keyframes: {
        'bottom-nav-dock': {
          /* Clases y keyframes coordinados de Barra de Navegación Móvil (Bottom Nav Dock) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[bottom-nav-dock_0.4s_cubic-bezier(0.34, 1.56, 0.64, 1)]">
  <!-- .bottom-dock-nav -->
</div>

.split-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 140px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.3);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: splitMenuReveal 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes splitMenuReveal {
  from { opacity: 0; transform: translateY(-8px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .split-menu-dropdown { animation: none !important; opacity: 1 !important; transform: none !important; }
}

<div class="split-btn-group">
  <button class="split-main-btn" type="button">Publicar</button>
  <button class="split-toggle-btn" type="button">&#9662;</button>
  <div class="split-menu-dropdown">
    <span class="split-item">Guardar borrador</span>
    <span class="split-item">Programar</span>
  </div>
</div>

<!-- HTML -->
<div class="split-btn-group">
  <button class="split-main-btn" type="button">Publicar</button>
  <button class="split-toggle-btn" type="button">&#9662;</button>
  <div class="split-menu-dropdown">
    <span class="split-item">Guardar borrador</span>
    <span class="split-item">Programar</span>
  </div>
</div>

<!-- CSS -->
<style>
.split-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 140px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.3);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: splitMenuReveal 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes splitMenuReveal {
  from { opacity: 0; transform: translateY(-8px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .split-menu-dropdown { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Botón de Acción Dividida (Split Action Menu)
module.exports = {
  theme: {
    extend: {
      animation: {
        'split-action-menu': 'split-action-menu 0.35s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'split-action-menu': {
          /* Clases y keyframes coordinados de Botón de Acción Dividida (Split Action Menu) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[split-action-menu_0.35s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .split-btn-group -->
</div>

.beacon-banner-strip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #4ade80;
  font-size: 11px;
  font-weight: 700;
  animation: bannerSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes bannerSlideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .beacon-banner-strip { animation: none !important; opacity: 1 !important; transform: none !important; }
}

<div class="beacon-banner-strip">
  <span class="beacon-pulse-core"></span>
  <span class="beacon-text">Todos los sistemas operativos</span>
</div>

<!-- HTML -->
<div class="beacon-banner-strip">
  <span class="beacon-pulse-core"></span>
  <span class="beacon-text">Todos los sistemas operativos</span>
</div>

<!-- CSS -->
<style>
.beacon-banner-strip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #4ade80;
  font-size: 11px;
  font-weight: 700;
  animation: bannerSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes bannerSlideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .beacon-banner-strip { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Banner de Alerta con Faro Lumínico (Status Beacon)
module.exports = {
  theme: {
    extend: {
      animation: {
        'status-beacon-banner': 'status-beacon-banner 0.5s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'status-beacon-banner': {
          /* Clases y keyframes coordinados de Banner de Alerta con Faro Lumínico (Status Beacon) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[status-beacon-banner_0.5s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .beacon-banner-strip -->
</div>

.dialog-card-surface {
  width: 190px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.4);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
  animation: dialogScalePop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes dialogScalePop {
  0% { opacity: 0; transform: scale(0.8) translateY(12px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .dialog-card-surface { animation: none !important; opacity: 1 !important; transform: none !important; }
}

<div class="dialog-card-surface">
  <div class="dialog-head-row">
    <strong>¿Confirmar acción?</strong>
  </div>
  <p class="dialog-msg">Esta operación sincronizará tu catálogo.</p>
  <div class="dialog-btn-row">
    <button class="dialog-btn-ok" type="button">Continuar</button>
  </div>
</div>

<!-- HTML -->
<div class="dialog-card-surface">
  <div class="dialog-head-row">
    <strong>¿Confirmar acción?</strong>
  </div>
  <p class="dialog-msg">Esta operación sincronizará tu catálogo.</p>
  <div class="dialog-btn-row">
    <button class="dialog-btn-ok" type="button">Continuar</button>
  </div>
</div>

<!-- CSS -->
<style>
.dialog-card-surface {
  width: 190px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.4);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
  animation: dialogScalePop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes dialogScalePop {
  0% { opacity: 0; transform: scale(0.8) translateY(12px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .dialog-card-surface { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Ventana Modal con Rebote de Superficie (Dialog Surface)
module.exports = {
  theme: {
    extend: {
      animation: {
        'dialog-surface-pop': 'dialog-surface-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) infinite',
      },
      keyframes: {
        'dialog-surface-pop': {
          /* Clases y keyframes coordinados de Ventana Modal con Rebote de Superficie (Dialog Surface) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[dialog-surface-pop_0.45s_cubic-bezier(0.34, 1.56, 0.64, 1)]">
  <!-- .dialog-card-surface -->
</div>

.inline-alert-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.35);
  color: #facc15;
  animation: alertSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes alertSlideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .inline-alert-box { animation: none !important; opacity: 1 !important; transform: none !important; }
}

<div class="inline-alert-box">
  <span class="alert-icon-sym">&#9888;</span>
  <div class="alert-content-wrap">
    <strong>Cambios guardados</strong>
    <small>Versión 2.4 activa</small>
  </div>
  <span class="alert-dismiss-x">&times;</span>
</div>

<!-- HTML -->
<div class="inline-alert-box">
  <span class="alert-icon-sym">&#9888;</span>
  <div class="alert-content-wrap">
    <strong>Cambios guardados</strong>
    <small>Versión 2.4 activa</small>
  </div>
  <span class="alert-dismiss-x">&times;</span>
</div>

<!-- CSS -->
<style>
.inline-alert-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.35);
  color: #facc15;
  animation: alertSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes alertSlideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .inline-alert-box { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Alerta Contextual con Desvanecimiento (Inline Alert)
module.exports = {
  theme: {
    extend: {
      animation: {
        'inline-alert-dismiss': 'inline-alert-dismiss 0.4s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'inline-alert-dismiss': {
          /* Clases y keyframes coordinados de Alerta Contextual con Desvanecimiento (Inline Alert) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[inline-alert-dismiss_0.4s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .inline-alert-box -->
</div>

.step-fill-line {
  flex: 1;
  height: 3px;
  background: #7b6ef6;
  transform-origin: left center;
  animation: stepperLineGrow 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes stepperLineGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .step-fill-line { animation: none !important; transform: scaleX(1) !important; }
}

<div class="stepper-track-wrap">
  <span class="step-circle is-done">&#10003;</span>
  <div class="step-fill-line"></div>
  <span class="step-circle is-current">2</span>
  <div class="step-empty-line"></div>
  <span class="step-circle">3</span>
</div>

<!-- HTML -->
<div class="stepper-track-wrap">
  <span class="step-circle is-done">&#10003;</span>
  <div class="step-fill-line"></div>
  <span class="step-circle is-current">2</span>
  <div class="step-empty-line"></div>
  <span class="step-circle">3</span>
</div>

<!-- CSS -->
<style>
.step-fill-line {
  flex: 1;
  height: 3px;
  background: #7b6ef6;
  transform-origin: left center;
  animation: stepperLineGrow 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes stepperLineGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .step-fill-line { animation: none !important; transform: scaleX(1) !important; }
}
</style>

// tailwind.config.js — Configuración para Barra de Pasos con Avance Coordinado (Progress Stepper)
module.exports = {
  theme: {
    extend: {
      animation: {
        'progress-stepper-line': 'progress-stepper-line 0.55s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'progress-stepper-line': {
          /* Clases y keyframes coordinados de Barra de Pasos con Avance Coordinado (Progress Stepper) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[progress-stepper-line_0.55s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .stepper-track-wrap -->
</div>

.toast-card {
  animation: fadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

<div class="toast-card">
  <span class="toast-icon">OK</span>
  <div class="toast-info">
    <strong>Guardado con éxito</strong>
    <p>Tus cambios han sido sincronizados.</p>
  </div>
</div>

<!-- HTML -->
<div class="toast-card">
  <span class="toast-icon">OK</span>
  <div class="toast-info">
    <strong>Guardado con éxito</strong>
    <p>Tus cambios han sido sincronizados.</p>
  </div>
</div>

<!-- CSS -->
<style>
.toast-card {
  animation: fadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
</style>

// tailwind.config.js — Configuración para Fade in
module.exports = {
  theme: {
    extend: {
      animation: {
        'fade-in': 'fade-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'fade-in': {
          /* Clases y keyframes coordinados de Fade in */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[fade-in_0.7s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .toast-card -->
</div>

.nav-chip {
  animation: slideIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-36px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-chip {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

<div class="nav-chip">
  <span class="chip-dot"></span>
  <span class="chip-text">Panel lateral activo</span>
  <span class="chip-arrow">&rarr;</span>
</div>

<!-- HTML -->
<div class="nav-chip">
  <span class="chip-dot"></span>
  <span class="chip-text">Panel lateral activo</span>
  <span class="chip-arrow">&rarr;</span>
</div>

<!-- CSS -->
<style>
.nav-chip {
  animation: slideIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-36px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-chip {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
</style>

// tailwind.config.js — Configuración para Slide in
module.exports = {
  theme: {
    extend: {
      animation: {
        'slide-in': 'slide-in 0.65s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'slide-in': {
          /* Clases y keyframes coordinados de Slide in */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[slide-in_0.65s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .nav-chip -->
</div>

.pop-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: #141523;
  border: 1px solid rgba(61, 221, 168, 0.4);
  border-radius: 999px;
  animation: scaleUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.65);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pop-badge { animation: none !important; opacity: 1 !important; transform: none !important; }
}

<div class="pop-badge">
  <span class="pop-icon">&#10003;</span>
  <strong>Acción Confirmada</strong>
</div>

<!-- HTML -->
<div class="pop-badge">
  <span class="pop-icon">&#10003;</span>
  <strong>Acción Confirmada</strong>
</div>

<!-- CSS -->
<style>
.pop-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: #141523;
  border: 1px solid rgba(61, 221, 168, 0.4);
  border-radius: 999px;
  animation: scaleUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.65);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pop-badge { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Scale Up / Pop In
module.exports = {
  theme: {
    extend: {
      animation: {
        'scale-up': 'scale-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'scale-up': {
          /* Clases y keyframes coordinados de Scale Up / Pop In */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[scale-up_0.45s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .pop-badge -->
</div>

.reward-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 12px;
  background: rgba(123, 110, 246, 0.15);
  border: 1px solid rgba(123, 110, 246, 0.4);
  animation: rotateIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-15deg) scale(0.8);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reward-badge { animation: none !important; opacity: 1 !important; transform: none !important; }
}

<div class="reward-badge">
  <span class="reward-star">&#9733;</span>
  <span>Nivel Pro Desbloqueado</span>
</div>

<!-- HTML -->
<div class="reward-badge">
  <span class="reward-star">&#9733;</span>
  <span>Nivel Pro Desbloqueado</span>
</div>

<!-- CSS -->
<style>
.reward-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 12px;
  background: rgba(123, 110, 246, 0.15);
  border: 1px solid rgba(123, 110, 246, 0.4);
  animation: rotateIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-15deg) scale(0.8);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reward-badge { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Rotate In
module.exports = {
  theme: {
    extend: {
      animation: {
        'rotate-in': 'rotate-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'rotate-in': {
          /* Clases y keyframes coordinados de Rotate In */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[rotate-in_0.55s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .reward-badge -->
</div>

.kpi-card {
  perspective: 600px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.3);
  animation: flipInX 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes flipInX {
  from {
    opacity: 0;
    transform: perspective(600px) rotateX(-70deg);
  }
  to {
    opacity: 1;
    transform: perspective(600px) rotateX(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kpi-card { animation: none !important; opacity: 1 !important; transform: none !important; }
}

<div class="kpi-card">
  <span class="kpi-label">Usuarios Activos</span>
  <strong class="kpi-value">+24,850</strong>
</div>

<!-- HTML -->
<div class="kpi-card">
  <span class="kpi-label">Usuarios Activos</span>
  <strong class="kpi-value">+24,850</strong>
</div>

<!-- CSS -->
<style>
.kpi-card {
  perspective: 600px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.3);
  animation: flipInX 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes flipInX {
  from {
    opacity: 0;
    transform: perspective(600px) rotateX(-70deg);
  }
  to {
    opacity: 1;
    transform: perspective(600px) rotateX(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kpi-card { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Flip In X / Volteo Horizontal
module.exports = {
  theme: {
    extend: {
      animation: {
        'flip-in-x': 'flip-in-x 0.6s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'flip-in-x': {
          /* Clases y keyframes coordinados de Flip In X / Volteo Horizontal */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[flip-in-x_0.6s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .kpi-card -->
</div>

.action-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #141523;
  border: 1px solid rgba(61, 221, 168, 0.3);
  animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .action-pill { animation: none !important; opacity: 1 !important; transform: none !important; }
}

<div class="action-pill">
  <span class="pill-dot"></span>
  <span>Sincronización en curso</span>
</div>

<!-- HTML -->
<div class="action-pill">
  <span class="pill-dot"></span>
  <span>Sincronización en curso</span>
</div>

<!-- CSS -->
<style>
.action-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #141523;
  border: 1px solid rgba(61, 221, 168, 0.3);
  animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .action-pill { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Slide Up / Deslizamiento Ascendente
module.exports = {
  theme: {
    extend: {
      animation: {
        'slide-up': 'slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'slide-up': {
          /* Clases y keyframes coordinados de Slide Up / Deslizamiento Ascendente */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[slide-up_0.5s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .action-pill -->
</div>

.glass-quote {
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: blurIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes blurIn {
  from {
    opacity: 0;
    filter: blur(14px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass-quote { animation: none !important; opacity: 1 !important; filter: none !important; }
}

<div class="glass-quote">
  <p>"Diseño en movimiento sin fricción."</p>
</div>

<!-- HTML -->
<div class="glass-quote">
  <p>"Diseño en movimiento sin fricción."</p>
</div>

<!-- CSS -->
<style>
.glass-quote {
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: blurIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes blurIn {
  from {
    opacity: 0;
    filter: blur(14px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass-quote { animation: none !important; opacity: 1 !important; filter: none !important; }
}
</style>

// tailwind.config.js — Configuración para Blur In / Desenfoque Progresivo
module.exports = {
  theme: {
    extend: {
      animation: {
        'blur-in': 'blur-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'blur-in': {
          /* Clases y keyframes coordinados de Blur In / Desenfoque Progresivo */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[blur-in_0.6s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .glass-quote -->
</div>

.curtain-panel {
  padding: 12px 18px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.3);
  animation: curtain 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes curtain {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .curtain-panel { animation: none !important; clip-path: none !important; }
}

<div class="curtain-panel">
  <strong>Módulo Verificado</strong>
  <span>100% código nativo</span>
</div>

<!-- HTML -->
<div class="curtain-panel">
  <strong>Módulo Verificado</strong>
  <span>100% código nativo</span>
</div>

<!-- CSS -->
<style>
.curtain-panel {
  padding: 12px 18px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.3);
  animation: curtain 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes curtain {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .curtain-panel { animation: none !important; clip-path: none !important; }
}
</style>

// tailwind.config.js — Configuración para Curtain Reveal / Recorte en Cortina
module.exports = {
  theme: {
    extend: {
      animation: {
        'curtain-reveal': 'curtain-reveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'curtain-reveal': {
          /* Clases y keyframes coordinados de Curtain Reveal / Recorte en Cortina */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[curtain-reveal_0.55s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .curtain-panel -->
</div>

.bounce-in-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(255, 110, 101, 0.4);
  animation: bounceIn 0.7s cubic-bezier(0.28, 0.84, 0.42, 1) both;
}

@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.08); }
  70% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bounce-in-box { animation: none !important; opacity: 1 !important; transform: none !important; }
}

<div class="bounce-in-box">
  <span class="badge-icon">!</span>
  <span>Actualización Disponible</span>
</div>

<!-- HTML -->
<div class="bounce-in-box">
  <span class="badge-icon">!</span>
  <span>Actualización Disponible</span>
</div>

<!-- CSS -->
<style>
.bounce-in-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(255, 110, 101, 0.4);
  animation: bounceIn 0.7s cubic-bezier(0.28, 0.84, 0.42, 1) both;
}

@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.08); }
  70% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bounce-in-box { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Bounce In / Entrada con Rebote
module.exports = {
  theme: {
    extend: {
      animation: {
        'bounce-in': 'bounce-in 0.7s cubic-bezier(0.28, 0.84, 0.42, 1) infinite',
      },
      keyframes: {
        'bounce-in': {
          /* Clases y keyframes coordinados de Bounce In / Entrada con Rebote */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[bounce-in_0.7s_cubic-bezier(0.28, 0.84, 0.42, 1)]">
  <!-- .bounce-in-box -->
</div>

.drop-card {
  padding: 10px 16px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.3);
  animation: dropIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateY(-44px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .drop-card { animation: none !important; opacity: 1 !important; transform: none !important; }
}

<div class="drop-card">
  <strong>Alerta del Servidor</strong>
  <small>Latencia normalizada</small>
</div>

<!-- HTML -->
<div class="drop-card">
  <strong>Alerta del Servidor</strong>
  <small>Latencia normalizada</small>
</div>

<!-- CSS -->
<style>
.drop-card {
  padding: 10px 16px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.3);
  animation: dropIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateY(-44px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .drop-card { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Drop In / Descenso con Impacto
module.exports = {
  theme: {
    extend: {
      animation: {
        'drop-in': 'drop-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'drop-in': {
          /* Clases y keyframes coordinados de Drop In / Descenso con Impacto */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[drop-in_0.5s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .drop-card -->
</div>

.zoom-down-card {
  padding: 12px 20px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.35);
  animation: zoomInDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    transform: translateY(-50px) scale(0.45);
  }
  60% {
    opacity: 1;
    transform: translateY(8px) scale(1.05);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zoom-down-card { animation: none !important; opacity: 1 !important; transform: none !important; }
}

<div class="zoom-down-card">
  <span class="zoom-icon">&darr;</span>
  <strong>Descarga completada</strong>
</div>

<!-- HTML -->
<div class="zoom-down-card">
  <span class="zoom-icon">&darr;</span>
  <strong>Descarga completada</strong>
</div>

<!-- CSS -->
<style>
.zoom-down-card {
  padding: 12px 20px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.35);
  animation: zoomInDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    transform: translateY(-50px) scale(0.45);
  }
  60% {
    opacity: 1;
    transform: translateY(8px) scale(1.05);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zoom-down-card { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Zoom In Down / Descenso Proyectado
module.exports = {
  theme: {
    extend: {
      animation: {
        'zoom-in-down': 'zoom-in-down 0.6s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'zoom-in-down': {
          /* Clases y keyframes coordinados de Zoom In Down / Descenso Proyectado */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[zoom-in-down_0.6s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .zoom-down-card -->
</div>

.slide-right-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(61, 221, 168, 0.3);
  animation: slideInRight 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(45px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide-right-card { animation: none !important; opacity: 1 !important; transform: none !important; }
}

<div class="slide-right-card">
  <span class="slide-right-indicator"></span>
  <span>Notificación entrante</span>
</div>

<!-- HTML -->
<div class="slide-right-card">
  <span class="slide-right-indicator"></span>
  <span>Notificación entrante</span>
</div>

<!-- CSS -->
<style>
.slide-right-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(61, 221, 168, 0.3);
  animation: slideInRight 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(45px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide-right-card { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Slide In Right / Entrada Lateral Derecha
module.exports = {
  theme: {
    extend: {
      animation: {
        'slide-in-right': 'slide-in-right 0.55s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'slide-in-right': {
          /* Clases y keyframes coordinados de Slide In Right / Entrada Lateral Derecha */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[slide-in-right_0.55s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .slide-right-card -->
</div>

.iris-banner {
  padding: 12px 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7b6ef6, #3ddda8);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.05em;
  animation: irisExpand 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes irisExpand {
  from {
    clip-path: inset(0 50% 0 50% round 12px);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 0 0 round 12px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iris-banner { animation: none !important; clip-path: none !important; opacity: 1 !important; }
}

<div class="iris-banner">
  <strong>CONFIRMACIÓN OFICIAL</strong>
</div>

<!-- HTML -->
<div class="iris-banner">
  <strong>CONFIRMACIÓN OFICIAL</strong>
</div>

<!-- CSS -->
<style>
.iris-banner {
  padding: 12px 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7b6ef6, #3ddda8);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.05em;
  animation: irisExpand 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes irisExpand {
  from {
    clip-path: inset(0 50% 0 50% round 12px);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 0 0 round 12px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iris-banner { animation: none !important; clip-path: none !important; opacity: 1 !important; }
}
</style>

// tailwind.config.js — Configuración para Apertura Expansiva Horizontal (Iris Reveal)
module.exports = {
  theme: {
    extend: {
      animation: {
        'expand-horizontally': 'expand-horizontally 0.5s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'expand-horizontally': {
          /* Clases y keyframes coordinados de Apertura Expansiva Horizontal (Iris Reveal) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[expand-horizontally_0.5s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .iris-banner -->
</div>

.flip-y-card {
  perspective: 600px;
  padding: 14px 22px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.35);
  animation: flipInY 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes flipInY {
  from {
    opacity: 0;
    transform: perspective(600px) rotateY(-80deg);
  }
  to {
    opacity: 1;
    transform: perspective(600px) rotateY(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flip-y-card { animation: none !important; transform: none !important; opacity: 1 !important; }
}

<div class="flip-y-card">
  <span class="flip-badge">3D</span>
  <strong>Tarjeta Virtual</strong>
</div>

<!-- HTML -->
<div class="flip-y-card">
  <span class="flip-badge">3D</span>
  <strong>Tarjeta Virtual</strong>
</div>

<!-- CSS -->
<style>
.flip-y-card {
  perspective: 600px;
  padding: 14px 22px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.35);
  animation: flipInY 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes flipInY {
  from {
    opacity: 0;
    transform: perspective(600px) rotateY(-80deg);
  }
  to {
    opacity: 1;
    transform: perspective(600px) rotateY(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flip-y-card { animation: none !important; transform: none !important; opacity: 1 !important; }
}
</style>

// tailwind.config.js — Configuración para Giro 3D en Eje Y (Flip In Y)
module.exports = {
  theme: {
    extend: {
      animation: {
        'flip-in-y': 'flip-in-y 0.65s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'flip-in-y': {
          /* Clases y keyframes coordinados de Giro 3D en Eje Y (Flip In Y) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[flip-in-y_0.65s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .flip-y-card -->
</div>

.roll-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #141523;
  border: 1px solid rgba(61, 221, 168, 0.4);
  animation: rollIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes rollIn {
  from {
    opacity: 0;
    transform: translateX(-60px) rotate(-120deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .roll-pill { animation: none !important; transform: none !important; opacity: 1 !important; }
}

<div class="roll-pill">
  <span class="roll-icon">&sect;</span>
  <span>Modo Activo</span>
</div>

<!-- HTML -->
<div class="roll-pill">
  <span class="roll-icon">&sect;</span>
  <span>Modo Activo</span>
</div>

<!-- CSS -->
<style>
.roll-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #141523;
  border: 1px solid rgba(61, 221, 168, 0.4);
  animation: rollIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes rollIn {
  from {
    opacity: 0;
    transform: translateX(-60px) rotate(-120deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .roll-pill { animation: none !important; transform: none !important; opacity: 1 !important; }
}
</style>

// tailwind.config.js — Configuración para Rodamiento Dinámico (Roll In)
module.exports = {
  theme: {
    extend: {
      animation: {
        'roll-in': 'roll-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'roll-in': {
          /* Clases y keyframes coordinados de Rodamiento Dinámico (Roll In) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[roll-in_0.6s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .roll-pill -->
</div>

.spiral-box {
  display: grid;
  place-items: center;
  animation: spiralIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes spiralIn {
  from {
    opacity: 0;
    transform: rotate(-180deg) scale(0.2);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spiral-box { animation: none !important; transform: none !important; opacity: 1 !important; }
}

<div class="spiral-box">
  <div class="spiral-core">NUEVO</div>
</div>

<!-- HTML -->
<div class="spiral-box">
  <div class="spiral-core">NUEVO</div>
</div>

<!-- CSS -->
<style>
.spiral-box {
  display: grid;
  place-items: center;
  animation: spiralIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes spiralIn {
  from {
    opacity: 0;
    transform: rotate(-180deg) scale(0.2);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spiral-box { animation: none !important; transform: none !important; opacity: 1 !important; }
}
</style>

// tailwind.config.js — Configuración para Entrada en Espiral (Spiral Twist)
module.exports = {
  theme: {
    extend: {
      animation: {
        'spiral-in': 'spiral-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'spiral-in': {
          /* Clases y keyframes coordinados de Entrada en Espiral (Spiral Twist) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[spiral-in_0.7s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .spiral-box -->
</div>

.swirl-card {
  padding: 12px 20px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.3);
  animation: swirlIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes swirlIn {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: rotate(35deg) scale(0.7);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: rotate(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .swirl-card { animation: none !important; filter: none !important; transform: none !important; opacity: 1 !important; }
}

<div class="swirl-card">
  <span class="swirl-tag">LAB</span>
  <strong>Efecto Vórtice</strong>
</div>

<!-- HTML -->
<div class="swirl-card">
  <span class="swirl-tag">LAB</span>
  <strong>Efecto Vórtice</strong>
</div>

<!-- CSS -->
<style>
.swirl-card {
  padding: 12px 20px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.3);
  animation: swirlIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes swirlIn {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: rotate(35deg) scale(0.7);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: rotate(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .swirl-card { animation: none !important; filter: none !important; transform: none !important; opacity: 1 !important; }
}
</style>

// tailwind.config.js — Configuración para Remolino con Desenfoque (Swirl Blur)
module.exports = {
  theme: {
    extend: {
      animation: {
        'swirl-in': 'swirl-in 0.65s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'swirl-in': {
          /* Clases y keyframes coordinados de Remolino con Desenfoque (Swirl Blur) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[swirl-in_0.65s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .swirl-card -->
</div>

.fold-panel {
  transform-origin: top center;
  perspective: 700px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(255, 189, 46, 0.4);
  animation: foldIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes foldIn {
  from {
    opacity: 0;
    transform: perspective(700px) rotateX(-90deg);
  }
  to {
    opacity: 1;
    transform: perspective(700px) rotateX(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fold-panel { animation: none !important; transform: none !important; opacity: 1 !important; }
}

<div class="fold-panel">
  <strong>Aviso Importante</strong>
  <p>Actualización en curso</p>
</div>

<!-- HTML -->
<div class="fold-panel">
  <strong>Aviso Importante</strong>
  <p>Actualización en curso</p>
</div>

<!-- CSS -->
<style>
.fold-panel {
  transform-origin: top center;
  perspective: 700px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(255, 189, 46, 0.4);
  animation: foldIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes foldIn {
  from {
    opacity: 0;
    transform: perspective(700px) rotateX(-90deg);
  }
  to {
    opacity: 1;
    transform: perspective(700px) rotateX(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fold-panel { animation: none !important; transform: none !important; opacity: 1 !important; }
}
</style>

// tailwind.config.js — Configuración para Despliegue 3D Origami (Fold In Top)
module.exports = {
  theme: {
    extend: {
      animation: {
        'fold-in': 'fold-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'fold-in': {
          /* Clases y keyframes coordinados de Despliegue 3D Origami (Fold In Top) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[fold-in_0.55s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .fold-panel -->
</div>

.stamp-box {
  display: inline-block;
  padding: 8px 18px;
  border: 2px solid #3ddda8;
  border-radius: 8px;
  color: #3ddda8;
  font-weight: 800;
  letter-spacing: 0.1em;
  animation: stampImpact 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes stampImpact {
  0% {
    opacity: 0;
    transform: scale(1.9) rotate(-10deg);
  }
  70% {
    opacity: 1;
    transform: scale(0.95) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(-4deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stamp-box { animation: none !important; transform: rotate(-4deg) !important; opacity: 1 !important; }
}

<div class="stamp-box">
  <span>APROBADO</span>
</div>

<!-- HTML -->
<div class="stamp-box">
  <span>APROBADO</span>
</div>

<!-- CSS -->
<style>
.stamp-box {
  display: inline-block;
  padding: 8px 18px;
  border: 2px solid #3ddda8;
  border-radius: 8px;
  color: #3ddda8;
  font-weight: 800;
  letter-spacing: 0.1em;
  animation: stampImpact 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes stampImpact {
  0% {
    opacity: 0;
    transform: scale(1.9) rotate(-10deg);
  }
  70% {
    opacity: 1;
    transform: scale(0.95) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(-4deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stamp-box { animation: none !important; transform: rotate(-4deg) !important; opacity: 1 !important; }
}
</style>

// tailwind.config.js — Configuración para Impacto Sello (Stamp Slam)
module.exports = {
  theme: {
    extend: {
      animation: {
        'stamp-in': 'stamp-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) infinite',
      },
      keyframes: {
        'stamp-in': {
          /* Clases y keyframes coordinados de Impacto Sello (Stamp Slam) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[stamp-in_0.45s_cubic-bezier(0.2, 0.8, 0.2, 1)]">
  <!-- .stamp-box -->
</div>

.spring-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #7b6ef6;
  color: #fff;
  animation: springPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes springPop {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spring-chip { animation: none !important; transform: scale(1) !important; opacity: 1 !important; }
}

<div class="spring-chip">
  <span class="spring-dot"></span>
  <strong>Elemento Activo</strong>
</div>

<!-- HTML -->
<div class="spring-chip">
  <span class="spring-dot"></span>
  <strong>Elemento Activo</strong>
</div>

<!-- CSS -->
<style>
.spring-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #7b6ef6;
  color: #fff;
  animation: springPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes springPop {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spring-chip { animation: none !important; transform: scale(1) !important; opacity: 1 !important; }
}
</style>

// tailwind.config.js — Configuración para Salto Elástico (Overshoot Spring Pop)
module.exports = {
  theme: {
    extend: {
      animation: {
        'pop-spring': 'pop-spring 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite',
      },
      keyframes: {
        'pop-spring': {
          /* Clases y keyframes coordinados de Salto Elástico (Overshoot Spring Pop) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[pop-spring_0.5s_cubic-bezier(0.34, 1.56, 0.64, 1)]">
  <!-- .spring-chip -->
</div>

.skew-in-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 8px;
  background: #7b6ef6;
  color: #fff;
  animation: skewInLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes skewInLeft {
  from { opacity: 0; transform: translateX(-40px) skewX(-20deg); }
  to { opacity: 1; transform: translateX(0) skewX(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .skew-in-badge { animation: none !important; opacity: 1 !important; transform: none !important; }
}

<div class="skew-in-badge">
  <span class="skew-sym">&#9889;</span>
  <strong>Activación Rápida</strong>
</div>

<!-- HTML -->
<div class="skew-in-badge">
  <span class="skew-sym">&#9889;</span>
  <strong>Activación Rápida</strong>
</div>

<!-- CSS -->
<style>
.skew-in-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 8px;
  background: #7b6ef6;
  color: #fff;
  animation: skewInLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes skewInLeft {
  from { opacity: 0; transform: translateX(-40px) skewX(-20deg); }
  to { opacity: 1; transform: translateX(0) skewX(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .skew-in-badge { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Entrada Inclinada en Eje X (Skew In)
module.exports = {
  theme: {
    extend: {
      animation: {
        'skew-in-left': 'skew-in-left 0.5s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'skew-in-left': {
          /* Clases y keyframes coordinados de Entrada Inclinada en Eje X (Skew In) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[skew-in-left_0.5s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .skew-in-badge -->
</div>

.zoom-rotate-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.35);
  animation: zoomInRotate 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes zoomInRotate {
  from { opacity: 0; transform: scale(0.3) rotate(-45deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .zoom-rotate-card { animation: none !important; opacity: 1 !important; transform: none !important; }
}

<div class="zoom-rotate-card">
  <div class="zoom-icon-box">&#9670;</div>
  <span>Insignia Pro</span>
</div>

<!-- HTML -->
<div class="zoom-rotate-card">
  <div class="zoom-icon-box">&#9670;</div>
  <span>Insignia Pro</span>
</div>

<!-- CSS -->
<style>
.zoom-rotate-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 12px;
  background: #141523;
  border: 1px solid rgba(123, 110, 246, 0.35);
  animation: zoomInRotate 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes zoomInRotate {
  from { opacity: 0; transform: scale(0.3) rotate(-45deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .zoom-rotate-card { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Zoom con Rotación Angular (Zoom In Rotate)
module.exports = {
  theme: {
    extend: {
      animation: {
        'zoom-in-rotate': 'zoom-in-rotate 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) infinite',
      },
      keyframes: {
        'zoom-in-rotate': {
          /* Clases y keyframes coordinados de Zoom con Rotación Angular (Zoom In Rotate) */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[zoom-in-rotate_0.55s_cubic-bezier(0.34, 1.56, 0.64, 1)]">
  <!-- .zoom-rotate-card -->
</div>

.diag-slide-pill {
  padding: 8px 18px;
  border-radius: 999px;
  background: #3ddda8;
  color: #0b0c14;
  font-weight: 700;
  animation: slideFadeDiag 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slideFadeDiag {
  from { opacity: 0; transform: translate(-30px, -30px); }
  to { opacity: 1; transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .diag-slide-pill { animation: none !important; opacity: 1 !important; transform: none !important; }
}

<div class="diag-slide-pill">
  <span>Confirmación Diagonal</span>
</div>

<!-- HTML -->
<div class="diag-slide-pill">
  <span>Confirmación Diagonal</span>
</div>

<!-- CSS -->
<style>
.diag-slide-pill {
  padding: 8px 18px;
  border-radius: 999px;
  background: #3ddda8;
  color: #0b0c14;
  font-weight: 700;
  animation: slideFadeDiag 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slideFadeDiag {
  from { opacity: 0; transform: translate(-30px, -30px); }
  to { opacity: 1; transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .diag-slide-pill { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>

// tailwind.config.js — Configuración para Entrada Diagonal con Desvanecimiento
module.exports = {
  theme: {
    extend: {
      animation: {
        'slide-fade-diag': 'slide-fade-diag 0.45s cubic-bezier(0.16, 1, 0.3, 1) infinite',
      },
      keyframes: {
        'slide-fade-diag': {
          /* Clases y keyframes coordinados de Entrada Diagonal con Desvanecimiento */
        },
      },
    },
  },
};

<!-- Clases arbitrarias en Tailwind CSS -->
<div class="animate-[slide-fade-diag_0.45s_cubic-bezier(0.16, 1, 0.3, 1)]">
  <!-- .diag-slide-pill -->
</div>