/* Consuerte Custom Styles */

/* Fuentes personalizadas Gotham Rounded */
@font-face {
    font-family: 'Gotham Rounded';
    src: url('../fonts/GothamRounded-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Rounded';
    src: url('../fonts/GothamRounded-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Rounded';
    src: url('../fonts/GothamRounded-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Clases de utilidad para las fuentes */
.font-gotham {
    font-family: 'Gotham Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.font-gotham-light {
    font-family: 'Gotham Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 300;
}

.font-gotham-medium {
    font-family: 'Gotham Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
}

.font-gotham-bold {
    font-family: 'Gotham Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
}

/* Animaciones personalizadas */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse-slow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

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

/* Clases de utilidad personalizadas */
.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-pulse-slow {
    animation: pulse-slow 2s ease-in-out infinite;
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 4s ease infinite;
}

/* Mejoras de accesibilidad */
.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-consuerte-primary;
}

/* Efectos de hover personalizados */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Estilos para formularios */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-consuerte-primary focus:border-transparent transition-colors duration-200;
}

.form-input:focus {
    @apply shadow-md;
}

.form-input.error {
    @apply border-red-500 focus:ring-red-500;
}

/* Botones personalizados */
.btn-primary {
    @apply bg-gradient-to-r from-consuerte-primary to-consuerte-secondary text-white font-semibold px-6 py-3 rounded-xl hover:from-blue-600 hover:to-blue-700 transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-consuerte-primary;
}

.btn-secondary {
    @apply bg-white text-consuerte-primary border-2 border-consuerte-primary font-semibold px-6 py-3 rounded-xl hover:bg-consuerte-light transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-consuerte-primary;
}

/* Cards personalizadas */
.card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-lg transition-shadow duration-200;
}

.card-hover {
    @apply hover:shadow-xl hover:-translate-y-1 transition-all duration-300;
}

/* Utilidades de gradiente */
.gradient-text {
    @apply bg-gradient-to-r from-consuerte-primary to-consuerte-secondary bg-clip-text text-transparent;
}

.gradient-bg {
    @apply bg-gradient-to-br from-consuerte-primary via-blue-600 to-consuerte-secondary;
}

/* Efectos de carga */
.loading-spinner {
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Responsive utilities adicionales */
@media (max-width: 640px) {
    .mobile-padding {
        @apply px-4;
    }
    
    .mobile-text {
        @apply text-sm;
    }
}

/* Dark mode support (futuro) */
@media (prefers-color-scheme: dark) {
    .dark-mode-ready {
        /* Estilos para modo oscuro */
    }
}

/* Mejoras de rendimiento */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
}

/* Efectos especiales para elementos interactivos */
.interactive-element {
    @apply transition-all duration-200 transform hover:scale-105 active:scale-95;
}

/* Estilos para notificaciones/toasts */
.toast {
    @apply fixed top-4 right-4 z-50 p-4 rounded-xl shadow-lg max-w-sm;
}

.toast.success {
    @apply bg-green-500 text-white;
}

.toast.error {
    @apply bg-red-500 text-white;
}

.toast.info {
    @apply bg-blue-500 text-white;
}

.toast.warning {
    @apply bg-yellow-500 text-white;
}