/* Estilos principales */

/* Base */
body {
    background: transparent;
    background-image: radial-gradient(circle at center top, rgba(248, 250, 252, 0.9), rgba(203, 213, 225, 0.7));
}

.font-sans {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol';
}

/* Material Symbols */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
    min-width: 24px;
    min-height: 24px;
}

/* Tipografía */
.text-metallic {
    background: linear-gradient(to bottom, #334155, #64748B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Efectos Glass y 3D */
.glass-panel {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.metal-shadow {
    box-shadow:
        inset 2px 2px 5px rgba(255, 255, 255, 0.8),
        inset -2px -2px 5px rgba(0, 0, 0, 0.2),
        5px 5px 15px rgba(0, 0, 0, 0.1);
}

/* Barra de progreso */
.progress-stripes {
    background: linear-gradient(45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent);
    background-size: 1rem 1rem;
    animation: stripes-move 3s linear infinite reverse;
}

.progress-bar {
    flex-shrink: 0;
    flex-grow: 0;
}

.w-progress-75 {
    width: 75% !important;
    max-width: 75% !important;
}

/* Animaciones */
@keyframes float-3d {

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

    50% {
        transform: translateY(-15px) rotateX(2deg) rotateY(-2deg);
    }
}

@keyframes gear-spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes arm-pivot {

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

    50% {
        transform: rotate(-25deg);
    }
}

@keyframes eye-blink {

    0%,
    45%,
    55%,
    100% {
        transform: scaleY(1);
        opacity: 1;
    }

    50% {
        transform: scaleY(0.1);
        opacity: 0.8;
    }
}

@keyframes float-shadow {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.1;
    }

    50% {
        transform: translateX(-50%) scale(0.8);
        opacity: 0.05;
    }
}

@keyframes stripes-move {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 1rem 0;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .glass-panel {
        margin: 0;
        border-radius: 0;
        width: 100%;
        max-width: 100%;
    }

    /* Título más pequeño en móvil */
    .title-construction {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
}

/* Utilidades */
.bg-steel-gradient {
    background: linear-gradient(135deg, #cbd5e1 0%, #f1f5f9 50%, #94a3b8 100%);
}

.bg-gold-gradient {
    background: linear-gradient(135deg, #fcd34d 0%, #fef3c7 50%, #d97706 100%);
}

/* Sombras engranajes */
.gear-shadow-lg {
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15));
}

.gear-shadow-xl {
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
}

.material-symbols-filled {
    font-variation-settings: 'FILL' 1;
}

/* Aviso noscript */
.noscript-warning {
    background: #fef3c7;
    color: #92400e;
    padding: 1rem;
    text-align: center;
    font-family: sans-serif;
}