.Contenido { 
            font-family: Arial, sans-serif; 
            display: flex; 
            background-color: #f4f4f9; 
            padding: 20px;
        }

        .visor-container { 
            flex: 2; 
            background: #fff; 
            border-radius: 10px; 
            height: 80vh; 
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);  
            margin-top: 7rem;
        }

        model-viewer { 
            width: 100%; 
            height: 100%; 
        }

        .controles-container { 
            flex: 1; 
            margin-left: 20px; 
            padding: 20px; 
            background: #fff; 
            border-radius: 10px; 
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
            margin-top: 9rem;
        }

        h2 { 
            border-bottom: 2px solid #333; 
            padding-bottom: 10px; 
        
        }
        .control-group { 
            margin-bottom: 20px; 
        }

        label { 
            display: block; 
            font-weight: bold; 
            margin-bottom: 8px; 
            font-size: 14px;
        }

        .color-btn { 
            width: 35px; 
            height: 35px; 
            border-radius: 50%; 
            border: 2px solid #ccc; 
            cursor: pointer; 
            margin-right: 5px; 
        }

        input[type="range"] { width: 100%; cursor: pointer; }

        .btn_tt {
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            border-radius: 8px;
            padding: 10px;
            box-shadow: 0 3px 5px rgb(0, 0, 0); 
            border: none; }

        /* =========================================
WHATSAPP (FLOTANTE)
   ========================================= */
#wpp-link {
    position: fixed;
    bottom: 3%;
    right: 3%;
    width: 60px; 
    height: auto;
    z-index: 100; 
    transition: transform 0.3s;
    display: block; /* Asegura que el enlace tome la forma de la imagen */
}

#wpp-link:hover { transform: scale(1.1); }

#wpp {
    width: 100%; /* La imagen se adapta a su contenedor (#wpp-link) */
    height: auto;
}

/* Y en tu media query para celulares (@media screen and (max-width: 480px)) */
@media screen and (max-width: 480px) {
    #wpp-link { width: 50px; right: 5%; bottom: 5%; }
}

/* Tu CSS original se mantiene igual aquí arriba... */

/* =========================================
   MEDIA QUERIES (RESPONSIVE Y ORDEN DE BOTÓN)
   ========================================= */

@media screen and (max-width: 900px) {
    /* 1. Apilamos los contenedores uno debajo del otro */
    .Contenido { 
        flex-direction: column; 
        padding: 10px;
    }

    /* 2. Ajustamos el visor 3D para móvil - CORREGIDO */
    .visor-container {
        margin-top: 2rem; 
        height: 50vh;     
        min-height: 400px; /* Evita que desaparezca y le da una altura mínima */
        width: 100%;
        flex-shrink: 0;    /* Evita que Flexbox aplaste el visor dejándolo en 0px */
        order: 2;          /* Lo manda debajo de los controles */
    }

    /* 3. Ajustamos el panel de controles */
    .controles-container {
        margin-left: 0;   
        margin-top: 20px;
        width: 100%;
        box-sizing: border-box; 
        
        /* Contenedor Flex para reordenar botones */
        display: flex;
        flex-direction: column; 
        order: 1;          /* Sube TODOS los controles arriba del visor */
    }

    /* 4. ¡LA MAGIA DEL BOTÓN TT! */
    .btn_tt {
        order: -1;        /* Lo manda a la parte más alta de los controles */
        margin-top: 3.5rem; 
        margin-bottom: 20px; 
        width: 100%;      
    }
}

/* Y mantienes tu media query de WhatsApp que ya tenías */
@media screen and (max-width: 480px) {
    #wpp-link { width: 50px; right: 5%; bottom: 5%; }
}