.scene3d {
    position: absolute;
    background-color: transparent;
    width: 100%;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 10;
    left: 0;
    right: 0;
    overflow-x: hidden;
}

#metalModel{
    /* Cambiar la animación para que empiece completamente invisible */
    animation: metalModel_animation 3s ease-in-out forwards;
    animation-delay: 2s;
    opacity: 0; /* Invisible al inicio */
    transform: translate(-50%, -50%) scale(0.8); /* Escala pequeña al inicio */
    filter: blur(3px); /* Blur al inicio */
}

@keyframes metalModel_animation {
    0% {
        opacity: 0; /* Invisible */
        transform: translate(-50%, -50%) scale(0.8); /* Escala pequeña */
        filter: blur(3px); /* Blur */
    }
    100% {
        opacity: 1; /* Completamente visible */
        transform: translate(-50%, -50%) scale(1); /* Escala normal */
        filter: blur(0px); /* Sin blur */
    }
}

model-viewer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 400;
    pointer-events: auto;
    background: transparent;
}

model-viewer::part(default-progress-bar) {
    --progress-bar-color: transparent;
}

/* Efecto metálico para transición */
.scene3d {
    transition:
        opacity 0.7s cubic-bezier(0.77, 0, 0.175, 1),
        filter 0.7s cubic-bezier(0.77, 0, 0.175, 1),
        visibility 0.7s;
}

.scene3d.transition-metal {
    filter: blur(8px) brightness(1.3) contrast(1.5) grayscale(0.2) drop-shadow(0 0 30px #bfc6d1);
    opacity: 0.5;
    animation: metallic-shine 0.7s;
}

.scene3d.visible {
    filter: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.scene3d.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes metallic-shine {
    0% {
        filter: blur(8px) brightness(1.3) contrast(1.5) grayscale(0.2) drop-shadow(0 0 30px #bfc6d1);
    }
    50% {
        filter: blur(4px) brightness(1.6) contrast(2) grayscale(0.1) drop-shadow(0 0 60px #e0e6ef);
    }
    100% {
        filter: blur(8px) brightness(1.3) contrast(1.5) grayscale(0.2) drop-shadow(0 0 30px #bfc6d1);
    }
}

/* Ocultar todos los controles y elementos del model-viewer */
model-viewer::part(default-ar-button),
model-viewer .hotspot,
model-viewer button,
model-viewer .ar-button,
model-viewer [slot="ar-button"],
model-viewer [slot="hotspot"],
model-viewer::part(default-progress-bar-container),
model-viewer::part(default-progress-mask),
model-viewer::part(default-progress-bar) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Ocultar cualquier overlay o control flotante */
model-viewer > *:not(canvas):not(div[class*="model"]) {
    display: none !important;
}

/* Asegurar que no aparezcan botones AR ni otros controles */
model-viewer {
    --poster-color: transparent;
    --progress-bar-color: transparent;
    --progress-mask-color: transparent;
}

@media (max-width: 1500px) {
    model-viewer {
        width: 70vw !important;
        height: 38dvh !important;
    }
}

@media (max-width: 900px) {
    .scene3d {
        position: absolute;
        background-color: transparent;
        width: 100%;
        height: 100dvh;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
        z-index: 10;
        left: 0;
        right: 0;
        overflow-x: hidden;
    }

    model-viewer {
        position: fixed !important;
        width: 45vw !important;
        height: 30dvh !important;
        left: 50%;
        top: 70%;
        transform: translate(-60%, -50%);
    }

    .scene3d[data-service="5"] model-viewer,
    .scene3d.service-5 model-viewer {
        width: 55vw !important;
        height: 28dvh !important;
    }
}

@media (max-height: 800px) {
    model-viewer {
        position: fixed !important;
        width: 45vw !important;
        height: 35dvh !important;
        left: 50%;
        top: 85%;
        transform: translate(-60%, -100%);
        margin-top: 5%;
    }

    .scene3d[data-service="5"] model-viewer,
    .scene3d.service-5 model-viewer {
        width: 35vw !important;
        height: 10dvh !important;
        max-height: 15dvh;
    }
}