/* ========================================
   EFFECTS.CSS - Estilos que NO pueden ir inline
   ========================================

   Este archivo contiene ÚNICAMENTE estilos que requieren
   pseudo-selectores u otras características CSS que no
   pueden definirse con style="..." inline.

   WORKFLOW:
   1. En VSCode: añade las clases de este archivo a elementos
   2. Greenshift copia el HTML + estilos inline (NO las clases)
   3. En WordPress: añade manualmente las clases de efectos
   4. Este CSS debe estar cargado en WordPress (Additional CSS o archivo)

   CONVENCIÓN: Prefijo ms-fx- (efectos)
   ======================================== */

/* ========================================
   1. TRANSICIONES BASE
   ======================================== */

.ms-fx-transition {
  transition: all 0.3s ease;
}

.ms-fx-transition-fast {
  transition: all 0.15s ease;
}

.ms-fx-transition-slow {
  transition: all 0.5s ease;
}

/* ========================================
   2. BOTONES - HOVER STATES
   ======================================== */

/* Hover genérico para botones (elevación + sombra) */
.ms-fx-btn-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ms-fx-btn-hover:active {
  transform: translateY(0);
}

/* Hover específico - Primary (oscurece) */
.ms-fx-btn-primary:hover {
  background-color: var(--color-primary-hover) !important;
}

/* Hover específico - Secondary (aclara) */
.ms-fx-btn-secondary:hover {
  background-color: var(--color-secondary-light) !important;
}

/* Hover específico - Urgency (oscurece) */
.ms-fx-btn-urgency:hover {
  background-color: var(--color-urgency-hover) !important;
}

/* Hover outline (rellena) */
.ms-fx-btn-outline:hover {
  background-color: var(--color-primary) !important;
  color: white !important;
  border-color: var(--color-primary) !important;
}

/* ========================================
   3. CARDS - HOVER STATES
   ======================================== */

/* Card que se eleva al hover */
.ms-fx-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(25, 49, 79, 0.12);
}

/* Card con borde que aparece */
.ms-fx-card-border:hover {
  border-color: var(--color-primary);
}

/* Card con scale sutil */
.ms-fx-card-scale:hover {
  transform: scale(1.02);
}

/* ========================================
   4. LINKS - HOVER STATES
   ======================================== */

/* Link que cambia de color */
.ms-fx-link:hover {
  color: var(--color-primary-hover);
}

/* Link con subrayado animado */
.ms-fx-link-underline {
  position: relative;
}

.ms-fx-link-underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width 0.3s ease;
}

.ms-fx-link-underline:hover::after {
  width: 100%;
}

/* ========================================
   5. FOCUS STATES (Accesibilidad)
   ======================================== */

/* Focus ring visible para navegación por teclado */
.ms-fx-focus:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.ms-fx-focus:focus:not(:focus-visible) {
  outline: none;
}

.ms-fx-focus:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ========================================
   6. IMÁGENES - HOVER STATES
   ======================================== */

/* Imagen con zoom al hover */
.ms-fx-img-zoom {
  overflow: hidden;
}

.ms-fx-img-zoom img {
  transition: transform 0.3s ease;
}

.ms-fx-img-zoom:hover img {
  transform: scale(1.05);
}

/* Imagen con overlay al hover */
.ms-fx-img-overlay {
  position: relative;
}

.ms-fx-img-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(45, 181, 187, 0);
  transition: background 0.3s ease;
}

.ms-fx-img-overlay:hover::before {
  background: rgba(45, 181, 187, 0.2);
}

/* ========================================
   7. ANIMACIONES / KEYFRAMES
   ======================================== */

/* Fade in al cargar */
.ms-fx-fade-in {
  animation: msFadeIn 0.5s ease forwards;
}

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

/* Pulse para CTAs urgentes */
.ms-fx-pulse {
  animation: msPulse 2s ease-in-out infinite;
}

@keyframes msPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* Shake para llamar atención */
.ms-fx-shake:hover {
  animation: msShake 0.5s ease;
}

@keyframes msShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* ========================================
   8. ESTADOS ESPECIALES
   ======================================== */

/* Disabled state */
.ms-fx-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading state con spinner */
.ms-fx-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.ms-fx-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: msSpinner 0.8s linear infinite;
}

@keyframes msSpinner {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   9. ICONOS
   ======================================== */

/* Icono que rota al hover */
.ms-fx-icon-rotate:hover svg,
.ms-fx-icon-rotate:hover i {
  transform: rotate(15deg);
}

/* Icono que escala al hover */
.ms-fx-icon-scale:hover svg,
.ms-fx-icon-scale:hover i {
  transform: scale(1.1);
}

/* ========================================
   10. DETAILS/SUMMARY (FAQs)
   ======================================== */

/* Estilo para el icono +/- en FAQs */
details summary span:last-child {
  transition: transform 0.3s ease;
}

details[open] summary span:last-child {
  transform: rotate(45deg);
}

/* Animación de apertura */
details[open] > *:not(summary) {
  animation: msDetailsOpen 0.3s ease;
}

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